Vuejs實戰項目四：權限校驗

路由跳轉參考文檔：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

在/src下創建permission.js進行權限校驗

並在main.js中全局引入：

import './permission'

/**
 * 權限校驗：
 *  Vue Router中的 前置鈎子函數 beforeEach(to,from,next)
 *  當進行路由跳轉之前，進行判斷 是否已經登錄過， 登陸過則允許訪問非登錄頁面，否則回到登錄頁
 * 
 *  to: 即將要進入的目標路由對象
 *  from：即將要離開的路由對象
 *  next: 是一個方法，可以指定路由地址，進行路由跳轉
 */

import router from './router'
import {getUserInfo} from '@/api/login'

router.beforeEach((to, from, next) => {

    // 1.獲取token
    const token = localStorage.getItem('msm-token')
    if (!token) {
        // 1.1 如果沒有獲取到，要訪問非登錄頁面，則不讓訪問，進入到登錄頁面/login
        if (to.path != '/login') {
            next({ path: '/login' })
        } else {
            // 請求登錄頁面 /login
            next({})
        }
    } else {
        // 1.2 獲取到 token，
        //1.2.1 請求路由 /login, 那就去目標路由
        if (to.path === '/login') {
            next()
        } else {
            //1.2.2 請求路由非登錄頁面，先在本地查看是否有用戶信息
            const userInfo = localStorage.getItem('msm-user')
            if (userInfo) {
                // 本地獲取到，則直接讓它去目標路由
                next()
            } else {
                //如果本地沒有用戶信息，就通過token去獲取用戶信息
                getUserInfo(token).then(response => {
                    const resp = response.data
                    if(resp.flag) {
                        //如果獲取到用戶信息，則進行非登錄頁面，否則回到登錄頁面
                        //保存到本地
                        localStorage.setItem('msm-user',JSON.stringify(resp.data))
                        next()
                    }else {
                        // 未獲取到用戶信息，重新登錄
                        next({path: '/login'} )
                    }
                })
            }
        }
    }

})