vue问题记录(三):addRouter动态路由加载,,实现权限功能以及菜单的动态生成
后续继续
这段时间一直在搞我们公司的二手车系统,然后在我快搞完的时候,竟然发现一个很大的问题 ,就是权限问题,一开始以为权限跟我没有关系,后台控制就好,后来,发现,事实不是这样的额,我得从后台获取权限,然后根据权限动态渲染一个菜单,听到这个消息,我真的急哭了,我也是一个菜鸟啊,问了后台,后台说这样,问了同学,同学说那样做,总之,我是没有想法,后来终于不枉我请假在家捉摸了一天,搞出来了,下面就把我的思路分享一下,
首先,我们得将后台的权限id跟我们的路由一对一,因为我们是根据id来判断是哪个权限的,那我们就得生成一个id跟路由的表,类似下图
其次,动态生成路由,因为我的需求,是登录后,进入后台管理系统,所以我是在登录成功的时候,获取权限,然后动态加载路由的
然后动态路由里面就有重定向的问题,因为动态的才菜单下面对应的内容,也是变化的,所有重定向的地方就不能写死了,这个地方,就要根据自己的实际需求来写了
这里配置好了,那动态的路由就配置成功了,然后就是生成动态的菜单的问题了
好像这样,就全都写完了,但是,不是这样的啊,刚刚的动态路由还存在一个问题,就是刷新的时候,就没了,所以我们得在刷新的时候,重新生成,那我们如何判断是刷新啊,这个时候是不是就想到了vuex,这个是全局的记录状态的,但是就一个不好,就是刷新的时候,就恢复原样了, 哈哈,这样刚刚好满足我们得需求啊,我们就是需要在刷新的时候重新加载一次动态路由,(但是吧,我们是希望登陆成功后,刷新进行添加,所以呢,在再加一个判断条件,等候成功后的标记,下下图代码)
然后在完善一下代码哈,当我们退出登录的时候,或者token 失效的时候,直接跳到登录页面,那就在beforeEach这个全局钩子函数里面写吧
// 拦截登录,token验证
router.beforeEach((to, from, next) => {
if(to.path == "/login"){
next();
}else{
let token = getCookie('token');
if(token){
next();
}else{
next('/login');
}
}
})
当时代码逻辑写错了,一直在这里,循环,后来后台一语惊醒梦中人啊,搞定了,我应该先判断是否在登录页面,然后在判断是否失效,嗯嗯,结束了,附上一张效果图(部分)哈
毕竟第一次独自负责一个前端项目,还是有点紧张的,还有10天就 上线了,希望一切顺利啊,然后老大拿到融资,给我们涨工资。
更多推荐
所有评论(0)