vue項目中前端判斷用戶登陸狀態以及驗權

登陸退出模塊的實現

1.用戶登陸，後臺會返給前端一個惟一的標識符token或者jssessionid（本文以session爲例，token也大體相同），前端將獲得的標識符存儲在cookies中，而且將路由跳轉到首頁；

2.用戶訪問，用戶訪問任何頁面時在全局的鉤子函數中取用戶登陸標識，存在纔會繼續路由跳轉，不存在的話將路由定向到登陸頁面，此時全部的請求應當攜帶登陸標識符，後臺用來判斷登陸權限；

3.登陸失效，後臺通常會設置用戶登陸失效的，一段時間內用戶不進行操做session會過時，此時用戶再次訪問後臺接口時後臺應做出響應，返回一個過時的code碼，前端攔截code碼，清除cookies並將路由定向到登陸頁面；

4.用戶退出，退出時清空cookies，路由定向到登陸頁面,避免路由bug也能夠刷新頁面。

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth'
const whiteList = ['/login', '/download'] // 不重定向白名單
router.beforeEach((to, from, next) => {
  if (getToken()) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      if (store.getters.menu.length === 0) {
        store.dispatch('GetUserInfo').then(res => { // 拉取用戶信息
          next()
        }).catch(() => {
          Message.error('驗證失敗,請從新登陸')
          store.dispatch('LogOut').then(() => {
            next({ path: '/login' })
            location.reload()
          })
        })
      } else {
        next()
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})
router.afterEach(() => {})
複製代碼