前端-关于存储的那些事儿(localstorage-token-vuex-redux)-持续更新

---

前言

简要整理一些关于存储场景的疑惑，不定期更新

1.localStorage 能实现 token 的存储需求，为什么还要存储在Vuex或者Redux中？

要点：页面渲染、 存储类型、 操作需求、 磁盘操作

1. localStorage ⾥的数据主要用于页面重新渲染时使用，Vuex 或 Redux ⾥的数据在 SPA ⽤户操作的时候使⽤。
2. localStorage 里存储的数据类型只能是字符串，如果存储的内容不是字符串，还需要转换，有额外的性能消耗。
3. localStorage 里的数据变化不能进行监控，如果有需求是根据 token 的变化进⾏操作，那localStorage 就实现不了。
4. localStorage 是磁盘操作，Vuex 和 Redux 是内存操作，数据存慢很多。

2.怎样结合vue-router与Vuex实现路由权限控制

要点：RABC(基于角色的访问控制)、 meta标签、 权限比较、 Vuex读取

1. 在路由 router.js 里面声明，从后端读取⽤户-⻆⾊-权限信息，通过 meta 标签来标示和记录。⽐如 meta: { roles: [ ‘R002’, ‘R003’] }，表示该⻚⾯只有管理员或超级管理员角色才有资格进⼊。
2. 当⽤户登录后，获取 roles，将 roles 和路由表每个页面需要的权限作⽐较，然后调⽤
   router.addRoutes(store.getters.addRouters)，添加⽤户可访问的路由，⽣成最终⽤户可访问的路由表，再把路由表存储到 Vuex ⾥。
3. 读取 Vuex 的路由表信息，根据 Vuex 中可访问的路由，渲染侧边栏菜单组件。

总结

提示：这里对文章进行总结：