在pc 管理系统这种类型的产品，通常会涉及到账号权限的控制，不同的账号权限能浏览的功能模块是不同的，对应侧边栏菜单模块的显示也会不同。
单点登录类系统，通常会多个项目公用一套登录系统，项目首页直接就是dashboard 或者 index页面，菜单权限数据会放在项目初始化时候通过登录系统返回的 tokenid（可以存放到cookie） 来请求接口获取，然后存到 sessionstorage ，到这里可能会有个问题，每次刷新页面时候都会重复请求这个接口，是没必要的，可以定义一个登录状态标识符，第一次登录成功后就做一个标识，之后项目页面刷新时候不再进行菜单权限接口请求，退出或者tokenid 过期失效时候，进行重置。
同样在路由卫士这样的地方进行跳转路径检查，白名单放行，无权限地址导到 404。
vuex 实际上是以全局变量的形式存储数据，每次刷新页面，就丢失了，可以通过几种方式来实现刷新数据保留
一、使用插件 vuex-persistedstate ，可以实现持久化state, 其支持设置 localstorage、sessionstorage、cookie 三种形式的存储，默认 localstorage，如果不想把所有state 都持久化，该插件也是支持配置指定的state 持久化。
二、 监听页面刷新（beforeunload），将 vuex 的 state 转存到 sessionstorage，根 vue实例 created 时候将 sessionstorage 里的数据在转存到 vuex 里（vuex.store的replacestate方法）。
我要评论export default {
name: 'app',
created () {
//在页面加载时读取sessionstorage里的状态信息
if (sessionstorage.getitem("store") ) {
this.$store.replacestate(object.assign({}, this.$store.state,json.parse(sessionstorage.getitem("store"))))
}
//在页面刷新时将vuex里的信息保存到sessionstorage里
window.addeventlistener("beforeunload",()=>{
sessionstorage.setitem("store",json.stringify(this.$store.state))
})
}
}
[参考](https://juejin.im/post/5c809599f265da2dbe030ec6)
通常页面内的增、删、改、查，操作也是需要有对应的权限控制的，所有页面模块的权限数据统一以对象形式在一个数组列表里面，存到 vuex，然后在每个页面的 created 时候，获取并绑定当前页面的 curd 权限，控制相关操作区域的渲染。
如对本文有疑问， 点击进行留言回复！！
androidx+viewpage+tablayout+json开发（加载图片和视频）
网友评论