vue beforeEach限制用户权限思路

700 阅读1分钟

vue-router的beforeEach限制用户跳转思路,之前一直没有用到过,记录一下思路. 通常分两种,一种是token校验,一种是后台获取用户列表,校验是否加载路由,如果包含路由就加载,如果不包含就跳转到无权限页面,代码(beforeEach//跳转之前,afterEach//跳转之前 参数一致 to from next)

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from "./components/Login";
import Onew from "./components/Onew"; 
import Tow from "./components/Tow";
import UnDefind from "./components/for404"; 
Vue.use(VueRouter);
let routes =[{ name: "one", path: "/one", component: Onew }, 
{ name: "tow", path: "/tow", component: Tow }, 
{ name: "login", path: "/login", component: Login }, 
{ name: "unDefind", path: "/unDefind", component: UnDefind },
{ path: '*', redirect: { name: "login" } }//根路径匹配 
] 
let userList = ['/one'];//用户允许进去的页面 记住匹配的是path 
let router = new VueRouter({
routes, 
mode: 'history'
}) 

router.beforeEach((to, from, next) => { 
let token = "我是验证的token"; //校验token是否过期 是不是去login页面
if (!token || to.path == "/login" || to.path == "/unDefind") { 
next() 
}else {
if (userList.includes(to.path)) {
console.log("包含权限"); next(); 
} else { 
next("/unDefind") }
}
})

export default router;