addRoute动态添加路由

本文介绍了一个基于Vue的前端项目中,如何通过动态路由实现用户权限控制。当用户登录后,根据其唯一标识获取权限信息,动态生成菜单。在路由守卫中,每次跳转时检查权限,确保用户只能访问有权限的页面。404页面也需作为动态路由处理,防止未授权的访问。这种方案提供了一种简洁的方法来处理用户权限和动态路由的配合。

项目进行到最后,突然通知说要使用动态路由,在网上找了一堆方法,发现不是要使用vuex就是要搭配缓存,这个时候完全不知如何下手,该怎么做简单一点呢?

先介绍一下项目需求,根据用户登录后返回的唯一标识去调接口,查询该用户下的页面权限,后端的处理是有张表专门存储前端views下的目录,举个例子:

则后端数据中存储的就是aaa\bbb\ccc三个菜单名和相关信息,我们调接口后,返回该用户可以操作的菜单的信息。

 我们的思路是,用户登录后,先调一遍接口,将该用户可以操控的页面在菜单栏都显示出来

 

后面再结合路由守卫,在每一次跳转的时候,就会查询一下,动态添加路由,匹配成功之后跳转显示页面。

 

这里有个前提是,这个权限只针对于右边菜单栏中的一整个选项,就是用户有权限的话,就是会现在这个菜单栏选项,没有权限直接不显示,有可能还有二级菜单的情况,那只需要再多写个条件判断就好了。

那如果此时aaa目录下还有页面,那我们可以不将这个页面写成动态路由,直接写在/home父路由children

 

 然后通过路由独享守卫beforeEnter(这里我就不写了),规定只能从路由aaa的路径下跳转到这个路径下,就可以控制非法操作了!

还有情况要说明的就是,有动态路由后,404页面也要写成动态路由的形式,不然可能会直接跳到404页面

这篇文章只大致给大家讲的是思路,只针对这种情况,搭配好路由守卫就可以做到一定的效果,当然大家有时间的话还是可以写的再严谨一些!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值