如果切换角色后权限不同 怎么清空之前添加动态路由。

Question

如果切换角色后权限不同 怎么清空之前添加的动态路由 不然导航守卫还是拦截不到。

Answer 1

Lemon甜橙君 2021-07-06 16:56:41

我也遇到了你这个问题，重新reload确实会影响体验，如果不采用此方案的话，你可以看下我从发现问题到解决问题的思路（差不多花费了半小时左右的时间）：

1、首先要找到一个初始状态值，所以我打开login页面，查看当前用到的路由（作为一个初始状态值），如下图

其实可以看到，这4个路由是基本的路由，其他都是我们动态添加路由，那我们需要做的其实就是在退出登录的时候，将所有的路由恢复到这个初始化状态；

2、有了第一条的思路后，就可以第二步就是应该去查阅vue-router4.0的官方文档，于是找到了下图

然后尝试了了用removeRoute()的方法来移出路由，发现会将所有home以及home的所有子路由都删除掉，而我们想要达到的效果是，删除除了home还有home名叫wecolme的子路由以外的所有路由，所以这个removeRoute API并不适合（当然你可以先删除再新增路由，只是显得代码有点臃肿），继续寻找方法；

3、有了以上的思路，我们继续看文档，发现了接下来文档的描述，如下图

这便是我的解决思路，可以添加一个同名的路由，这样可以直接覆盖掉之前同名的路由，看到这里，其实就很简单了，只需要添加一个home，和welcome路由即可，所以我们需要做的就是，在单击退出的时候，添加一步操作，如下图：

4、测试，效果，当用admin账号登录后，点击退出，在不刷新页面的情况下，登录普通的账号（比如这个账号没有角色管理权限），那么在登录成功之后，如果从url上边直接输入/system/role的话，会直接被拦截，进入熟悉的404狗头页面。

• 提问者 _追随 #1

  其实这一块当时也想到了 方法也比较多 也可以获取当前路由站 获取路由名进行遍历删除 方法也大差不差 有了动态路由 就没必要在使用导航守卫跳转到404狗头了  用*之类的默认路由跳转就好了

Answer 2

河畔一角 2021-06-29 09:46:38

产品应该是可以理解的，角色改变，自动跳到首页并刷新这应该很合理

• 提问者 _追随 #1

  如果有些产品不理解怎么办 他会说用户体验有点差（会有一次闪屏现象） 有没有其他办法

• Lemon甜橙君 回复 提问者 _追随 #2

  今天刚好学到这章，也碰到了这个问题，上边仔细的回答了一下，你可以去试一下哈

Answer 3

河畔一角 2021-06-29 09:46:05

切换角色后，可以通过代码reload一下当前页面，并重定向到首页，这样就会从加载一次路由