vue-router 权限拦截

1、创建permisson.js文件

/*
权限校验：
vue Router中的前置钩子函数 beforeEach(to,from,next)
当进行路由跳转之前进行判断，是否已经登录过，登录过则允许访问登陆界面，后者回到登录页
*/
import router from '@/router/'
import { getUserInfo } from './api/login'

router.beforeEach((to, from, next) => {
    //1、获取本地token
    const token = localStorage.getItem('mxg-msm-token')
    console.log('token', token)
    if (!token) {
        // 1.1如果没有获取到token
        //  加到登录页面/login
        if (to.path !== '/login') {
            next({ path: '/login' })
        } else {
            // 没有token,请求登录页面,让其去/login
            next()
        }
    } else {
        // 1.2获取到token，
        // 1.2.1 请求路由/login，那就去目标路由
        if (to.path === '/login') {
            next()
        } else {
            // 1.2.2 请求路由非登录界面，先在本地查看是否有用户信息
            const userInfo = localStorage.getItem('mxg-msm-user')
            if (userInfo) {
                //本地获取到用户信息，说明登录过，可以随便进哪个页面，直接去目标路由
                next()
            } else {
                //如果本地没有用户信息,就通过token去后台 获取用户信息，
                getUserInfo(token).then(response => {
                    const res = response.data
                    if (res.flag) {
                        //如果获取到用户信息，则进行非登录页面，否则回到登录页面
                        //保存用户信息到本地
                        localStorage.setItem('mxg-msm-user', JSON.stringify(res.data))
                        next()
                    } else {
                        //未获取到用户信息，重新登陆
                        next({ path: '/login' })
                    }
                })

            }
        }

    }
})

2、需要在main.js中全局引入