语法 | 行为 | 场景 |
---|---|---|
next() | 直接放行 | 无需拦截的公共页面,白名单(如首页) |
next(false) | 中断导航 | 用户无权访问的目标路由 |
next({…to}) | – | – |
next({…to,replace:true}) | 强制重新导航并替换历史记录 | 动态路由加载后更新路由表 |
附上路由代码:
const whiteList = ["/login",];//login页等白名单
const isWhiteList = (path) => {
return whiteList.some((pattern) => isPathMatch(pattern, path));
};
router.beforeEach((to, from, next) => {
NProgress.start();
if (getToken()) {
to.meta.title && useSettingsStore().setTitle(to.meta.title);
/* has token*/
if (to.path === "/login") {
next({ path: "/" });
NProgress.done();
} else if (isWhiteList(to.path)) {
next();
} else {
if (useUserStore().roles.length === 0) {
// isRelogin.show = true;
// 判断当前用户是否已拉取完user_info信息
useUserStore()
.getInfoTest()
.then((infoData) => {
isRelogin.show = false;
usePermissionStore()
.generateRoutesTest(infoData)
.then((accessRoutes) => {
// 根据roles权限生成可访问的路由表
accessRoutes.forEach((route) => {
if (!isHttp(route.path)) {
router.addRoute(route); // 动态添加可访问路由表
}
});
next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
});
})
.catch((err) => {
isRelogin.show = false;
});
} else {
next();
}
}
} else {
// 没有token
if (isWhiteList(to.path)) {
// 在免登录白名单,直接进入
next();
} else {
next("/login"); // 否则全部重定向到登录页
NProgress.done();
}
}
});