vue項目實現系統權限攔截

后台管理系統權限校驗需求：

當訪問系統非登錄頁面時，需要檢驗用戶是否登錄，如果沒有登錄，則跳轉到登錄頁面。

首先，新建一個權限文件permission.js，直接在main.js中引入

接下來開始編寫permission.js
1:將router.js引入

2：使用vue-router中的前置導航鈎子函數：beforeEach(to,from,next)實現功能

import router from './router/index'
import { getUserInfo } from './api/login'
router.beforeEach( (to,from,next) =>{
    //首先獲取token值
    const token = localStorage.getItem('token')
    //沒有獲取到
    if(!token){
        //如果訪問非登錄頁面，則指定跳轉到/login
        if(to.path !=='/login'){
            next({ path:'/login' })
        }else{
        //如果訪問登錄頁面
            next()
        }
    }else{
        //獲取token成功
        //如果訪登錄頁面
        if(to.path ==='/login'){
            next()
        }else{
        //如果訪問非登錄頁面，先查看本地是否有用戶信息
        const userdata = localStorage.getItem('usedata')
        //本地有用戶信息，直接去目標路由
        if(userdata){
            next()
        }else{
        //本地沒有用戶信息，通過token獲取用戶信息
        getUserInfo(token).then(res=>{
            if(res.data.flag){
                //獲取用戶信息成功，則進入非登錄頁面，否則進入登錄頁面
                //保存信息
                localStorage.setItem('usedata',JSON.stringify(res.data))
                next()
            }else{
                //未成功獲取用戶信息，重新登陸
                next({path:'/login'})
            }
        })
        }
        }
    }
})