【求助】vue后台左侧菜单栏权限修改后的更新问题

Question

后台用的是vue+element

具体问题描述：

1. 用户登录时，在permission.js文件里，通过router.beforeEach，取得左侧菜单栏的数据后保存至sessionStorage
2. 后台修改权限信息后，退出后台重新登录，发现左侧菜单栏还是老的，必须F5刷新下才会变成最新的

不知该如何解决？

Answer 1

不用将 router list 存到 sessionStorage 吧，每次登录请求一次，然后将数据存到 store 内存里面不就行了吗？

Answer 2

一般来说权限信息都不应该暴露在用户可见的范围内，包括浏览器存储。按gauseen老哥说的数据存到store就好，登录或者刷新页面就去请求数据。另外权限更改要分情况讨论
一：用户主动修改权限，这时发起请求，获取最新权限，commit到store中，视图重新渲染，就不用刷新整个网页
二：用户被动修改权限（如管理员关闭了普通用户的权限），普通用户在发起任意一个请求，后端返回无权限时，用户端重新获取最新权限，commit到store,视图重新渲染，就不用刷新整个网页

在视图重新渲染过程中，要判断用户所在当前页路由是否有权限，如有则让导航栏重新渲染即可，如无则需要从权限路由数组里取出一个，并跳转

ps: 1、浏览器存储指的是 sessionStorage,localStorage,cookie这些

2、store指的是[vuex](https://vuex.vuejs.org/zh/)的store

Answer 3

那就退出的时候刷新一下不就好了
location.reload()

Answer 4

保存的时候顺便把旧的删除就行了。
我比较好奇的是为什么保存的时候新数据不会覆盖旧数据，是因为每一条占用一个键名吗？