路由限权

路由权限验证

权限校验： 通过router路由前置钩子函数 beforeEach() ， 在跳转路由前进行拦截判断是否已经登录， 如果已登录，则进行路由跳转，如果没有则回到登录页

在src目录下创建一个permission.js文件来做路由权限验证

在main.js中引入路由权限验证

main.js配置

import permission from "./permission"

permission.js配置

//引入路由文件
import router from "./router/index"
//引入login接口
import loginApi from "./api/login"
//对路由添加路由前置钩子函数beforeEach
router.beforeEach((to, from, next) => {
    //获取本地存储的token
    var token = localStorage.getItem("admin")
    //判断是否有token
    if (!token) {
        //如果没有执行这里的代码
        //判断如果没有token现在的位置是不是在login中
        if (to.path !== "/login") {
            //如果不是强制跳转到login路由
            next({ path: "/login" })
        } else {
            //如果是继续next
            next()
        }
    } else {
        //如果有token，判断当前是不是在login路由中
        if (to.path === "/login") {
            //如果是继续next
            next()
        } else {
            //如果不是那么获取一下用户信息
            var info = localStorage.getItem("info")
            //判断本地存储中是否有用户信息
            if (info) {
                //如果有继续next
                next()
            } else {
                //如果说没有的话通过token获取用户的信息
                loginApi.getInfo(token).then(msg => {
                    var resp = msg.data
                    //判断看是否获取到了用户信息
                    if (resp.flag) {
                        //如果获取到了 保存在本地存储
                        localStorage.setItem("info", JSON.stringify(resp.data))
                    } else {
                        //如果没有获取到强制跳转到登录页面
                        next({ path: "/login" })
                    }
                })

            }
        }
    }
})