1. 程式人生 > >如何在vue-router的beforeEach鉤子裡做頁面訪問許可權驗證

如何在vue-router的beforeEach鉤子裡做頁面訪問許可權驗證

一般前端做的話放到sessionStorage裡面,通過vuex去管理,直接上程式碼吧(我專案裡'/'是登入頁,'/Table'是登入後的首頁)

// main.js
router.beforeEach((to, from, next) => {
  if (to.path === '/' && sessionStorage.getItem('accessToken') && from.path !== '/Table'){
    sessionStorage.removeItem('accessToken')
    next()
  }
  else if (to.meta.requiresAuth && !sessionStorage.getItem('accessToken'
)){ next( { path: '/', query: {redirect: to.fullPath} } ) } else if (from.path === '/Table' && to.path === '/'){ next({ path: '/Table' }) } else{ next() } })

下面是登入頁

  login (){
    var _this = this;
    let params = {}
    params = {
      username: this
.username, password: this.password } api.login_in(params).then(data => { if (data) { this.$store.commit(types.LOGIN_IN, data) this.$router.push(this.$route.query.redirect || '/Table'); Toast({ message: '登入成功', iconClass: 'icon-success'
, }) } }) }

然後是store.js

const state = {
  accessToken: null
}

const mutations = {
  [types.LOGIN_IN] (state, data) {
    state.accessToken = data
    sessionStorage.setItem('accessToken', JSON.stringify(data.name))
  },
  [types.LOGIN_OUT] (state, data) {
    state.accessToken = null
  }
}

相關推薦

如何在vue-router的beforeEach鉤子頁面訪問許可權驗證

一般前端做的話放到sessionStorage裡面,通過vuex去管理,直接上程式碼吧(我專案裡'/'是登入頁,'/Table'是登入後的首頁)// main.js router.beforeEach((to, from, next) => { if (to.pat

基於Vue-Router和Vuex的頁面訪問許可權控制

最近在用Vue做專案的時候,遇到前端頁面的訪問許可權控制問題。參考了網上一些文章的思路,並且自己動手做了一個demo。 應用場景如下:一個網站多個角色,例如admin(管理員),guest(普通客戶),

iframe中父與子頁面訪問許可權問題

一、同域 方法呼叫父頁面呼叫子頁面方法:FrameName.window.childMethod(); 子頁面呼叫父頁面方法:parent.window.parentMethod(); DOM元素訪

Django:Error: [WinError 10013] 以一種訪問許可權不允許的方式了一個訪問套接字的嘗試。(殺佔用埠程序)

Error: [WinError 10013] 以一種訪問許可權不允許的方式做了一個訪問套接字的嘗試。 1.啟動伺服器的時候提示埠被佔用,Error: [WinError 10013] 以一種訪問許可權不允許的方式做了一個訪問套接字的嘗試。  解決方案 1.查找出被佔用的

Error: [WinError 10013] 以一種訪問許可權不允許的方式了一個訪問套接字的嘗試。

該錯誤其實是Django的埠號被佔用,解決步驟如下:1.找出佔用的埠號:輸入netstat -ano|findstr 8000  2.找出埠號對應的伺服器:tasklist if indstr 3144 i 3.終止埠號對應的程序:輸入taskkill /pid

Vue之路由鉤子函式

在router.js裡定義鉤子函式 在router.js裡新增beforeEnter和beforeLeave這兩個鉤子函式,beforeEnter這個鉤子函式需要新增next();不然頁面不能進行跳

poi操作execl如何在cell一個超連結訪問當前路徑資料夾或檔案

這個是設定一個超連結彈出email地址, 其他類似   import java.io.FileOutputStream;   import org.apache.poi.ss.usermodel; 

webpack+vue.js+elementUI試後臺管理頁面

前言 由於上次搭好了SSM後端框架,就想著順便把以前那個部落格網站的後臺管理系統給做了,系統的後端環境是有了,前端頁面用什麼開發呢?之前簡單的看了vue.js,所以就決定用vue.js做前端頁面,然後搜了一些vue.js配套的ui,找到了elementUI。而

OSError: [WinError 10013] 以一種訪問許可權不允許的方式了一個訪問套接字的嘗試

建立mock介面,執行時報錯。 通過命令檢視是否存在端口占用的問題。cmd下輸入 netstat -ano|findstr 8080,找出8080埠對應的PID程序為4228。 輸入tasklist |findstr 4228找出程序對應的詳細資訊。 解決辦

自己試驗在spring的環繞通知獲取目標物件的類名和目標方法的引數類名,用於根據自定義註解判斷訪問許可權,有沒有更好的辦法,高手指點一下

public Object doInBusiness(ProceedingJoinPoint pjp) throws Throwable{   Object[] args = pjp.getArgs();   Class[] argsClass = new Class[ar

JSP頁面設定登入訪問許可權

如何限制頁面必須在滿足某些條件後才能訪問? 比如下面這個例子: 這是一個簡單的登入介面,輸入使用者名稱和密碼後,經過後臺的驗證,進入到相應的主介面 按照常理來說是這樣的,但是我們發現,當我們直接訪問主介面main.jsp時,卻也可以直接進入到主介面

vue鉤子函式對路由進行許可權跳轉

import router from './router'; 使用鉤子函式對路由進行許可權跳轉 router.beforeEach((to, from, next) => { const role = localStorage.getItem('ms_us

vue-cli + router生成的專案,當mode為history時,直接在url中輸入地址頁面訪問404,或者重新整理頁面後404

有的時候,業務中會有一些需求,直接在其他地方,比如郵件中提供系統連結,通過點選一個url直接跳轉到我們的系統中來。 在本地開發時,直接輸入對應的url就可以訪問,但是當專案部署在伺服器之後,直接輸入url就會報錯404,這是因為router本身提供的就是一個 虛擬路徑,通過

許可權系統--通過shiro進行按鈕及頁面訪問url的許可權控制

一:問題的引入 前面雖然基本的功能都有了但是頁面按鈕的控制與url的控制還是沒有處理。這麼一個場景,雖然使用者只能通過點選選單進行各個介面的訪問,假如使用者知道了你的介面的訪問url,直接跳過選單訪問的話,正常來說是不應該跳轉到對應的介面上的。如果不對其進行控制,也會造成許

vue 使用localStorage保存頁面變量到瀏覽器變量中

() vuejs win color bsp .get urn str ejs const STORAGE_KEY = ‘todos-vuejs‘//定義常量保存鍵值 export default{ fetch(){ return JSON.parse

vue鉤子函數

結束 group create csdn 清空 def 生成 文獻 rem <!DOCTYPE html> <html> <head> <title></title> &l

asp.net 訪問頁面訪問統計實現

space error cti test exe select utf-8 sender else 0x00、背景: 1、用戶訪問網站所有頁面就將訪問統計數加1 ,按每月存放。 2、站點並沒有用到母版面來實現,所有各個頁面都很獨立。 3、網站是很早這前的網站,盡量省改動以前

用node.js express設置路徑後 子路徑下的頁面訪問靜態資源路徑出問題

ref gin images ejs title use func tle public 在routes/news_mian.js 設置了訪問news_main.html 的路徑 ‘/‘,通知設置一個訪問news-page.html的子路徑‘/newspage‘子路徑。但是

基於laravel5.4 vuevue-element搭建的單頁面後臺CMS

data pos dev https art .sql blog -s sql 介紹 該項目後臺是基於vue和laravel搭建的單頁面CMS系統,包含了文章管理,權限管理,用戶管理等基本模塊。 前臺使用了傳統web技術,laravel渲染搭建了個博客系統 githu

使用Gzip壓縮數據,加快頁面訪問速度

https bytearray class json html zip 內容類型 lose put 在返回的json數據量大時,啟用Gzip壓縮,可以提高傳輸效率。下面為Gzip壓縮對json字符串壓縮並輸出到頁面的代碼。一、代碼 /** 向瀏覽器