如题,使用 addRoute 来动态添加路由的时候,从 store 里面调用 actions 的中一个方法从后端获取路由地址。然后再添加到路由中。 代码如下:
router.beforeEach(async (to, from, next) => {
NProgress.start(); // NProgress 开始
if (allowList.includes(to.name)) {
// 若跳转页面非免登录名单,则直接进入
next();
} else {
// 若当前页面需要登录
// 则判断当前页面是否已经拥有登录权限 token
if (storage.get('token')) {
const mainStore = useMainStore();
if (mainStore.routerList === null) {
mainStore.getRouterList().then(res => {
console.log(res)
router.addRoute(res)
next()
})
} else {
next()
}
} else {
// 没有 token 内容,所以进入登录页面
next({ path: '/user' })
}
}
})
但是浏览器运行到时候却报了警告!
vue-router.esm-bundler.js:72 [Vue Router warn]: The "next" callback was never called inside of :
async (to, from, next) => {
NProgress.start(); // NProgress 开始
if (allowList.includes(to.name)) {
// 若跳转页面非免登录名单,则直接进入
next();
} else {
// 若当前页面需要登录
// 则判断当前页面是否已经拥有登录权限 token
if (storage.get('token')) {
const mainStore = useMainStore();
if (mainStore.routerList === null) {
mainStore.getRouterList().then(res => {
console.log(res)
router.addRoute(res)
next()
})
} else {
next()
}
} else {
// 没有 token 内容,所以进入登录页面
next({ path: '/user' })
}
}
}
. If you are returning a value instead of calling "next", make sure to remove the "next" parameter from your function.
难道 next 方法不能放在函数中????
1
yamedie 2022-01-12 09:58:48 +08:00
改成这种写法试一下吧
const res = await mainStore.getRouterList(); // res.xxxxx 略 next(); 然后动态加载路由也不适合放在路由守卫里吧, 我觉得应该放在 App.vue 的 created 或 main.js 之类的位置 |
2
qq309187341 OP @yamedie 忘记你这种方式好像也是可以的。。。
我看几个大的脚手架好像都是放在路由守卫里面进行添加的。。。 |
3
tutou 2022-01-12 10:05:38 +08:00
首先 async await 要一起用。第二实现你的需求,不用动态添加路由,你都 beforeEach 判断了,没有 token 强制跳登录页面就行了,而且还可以做到登录后再跳回来
|
4
qq309187341 OP @tutou async 是之前写了,忘记删除了。一楼说起来,我才想起来可以使用这种方式解决 next()控制台报错的问题。至于动态路由的问题,只是因为需要根据后端来对不同角色生成不同菜单。
|
5
wu67 2022-01-12 10:47:47 +08:00
其实我觉得, 不对路由做改动更好. 在守卫里面判断权限 /token, 然后做重定向即可. 这样可以避免在地址栏输入无权限的 url 时 404.
|
6
walpurgis 2022-01-12 13:26:03 +08:00
同建议不要动态路由,开发和 debug 都麻烦
后端只下发权限,前端根据权限把路由配置过滤一遍生成菜单列表,分离模式下后端不应该知道前端路由 |
7
jqtmviyu 2022-01-12 14:45:25 +08:00
估计是因为还要开放一个路由权限控制页面给用户设置, 路由是存在数据库里的, 导航菜单由后端返回生成.
|
8
wunonglin 2022-01-12 14:46:05 +08:00
路走错了。你这功能这么设计本身就有问题
|