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;