动态路由表的实现,根据不同的用户登录后端传不同的路由表

312 阅读1分钟
问题:动态路由表的实现,根据不同的用户登录后端传不同的路由表?
原因有:
1,在登录时请求接口时,将传入的路由表如何存储渲染路由?
答:我采用了将vuex的状态存储方式,然后在用getter的方法引用,在调用的组件中使用计算
属性 computed调用,为了在dom结构渲染时就将路由渲染,我再次在created的钩子
函数中调用!
2,采用了vuex的方式存储方式,但刷新页vue将缓存清除,路由菜单栏失效?
答:为了使路由状态不失效,我参考了存储token的方式将routers路由表存储在cookie中,然
后在 getter判断cookie有router使用没有就使用store中的路由。
3,cookie的存储是数组存储,但取出后就是字符串的格式,无法解析?
答:我当晚回去后想的比较愚,就是使用字符串转数组,或者正则转数组的方式,但转换了两层
后就感觉不切实际,而且对性能的循环消耗很大,于是参照网上的方法 用 Cookies.set('routers',JSON.stringify(routers))存储,在使用JSON.parse(Cookies.get('routers'))
取出
4,因为getter的存储方式是缓存存储,每次重新登录不会立即刷新?
答:采用了在mutations的方法中 Vue.set(state,'routers',routers);,但这还不行,于是在getter中取路由的方式
let localRouter = Cookies.get('routers');
if(localRouter){
state.routers =JSON.parse(Cookies.get('routers'));
}
每次return 的对象必须是 state.routers中的键值
5,优化:为了防止手动去清除cookie中的路由信息?
答:在getter中加了判断,如果cookie中的routers的信息不存在就直接跳转login页,所有cookie信息remove!至此动态路由解决