vue项目中的菜单权限控制

在pc 管理系统这种类型的产品，通常会涉及到账号权限的控制，不同的账号权限能浏览的功能模块是不同的，对应侧边栏菜单模块的显示也会不同。

场景一、（电商类管理系统）

登录
登录后，依次获取账号 tokenId、店铺列表、默认店铺ID、菜单列表
通过菜单列表生成侧边栏，注意router 文件里面定义了全部的页面路由，所以配置新菜单时候需要提供给后端前端定义的页面路径
menuList 数据存起来，可以存在 vuex、sessionStorage，这个数据可以用于router 里面非白名单页面的拦截比对，如果访问当前账号无权限的页面，可将其跳转 404 页面
在路由卫士里面拦截检查

场景二、（电商类单点登录系统）

单点登录类系统，通常会多个项目公用一套登录系统，项目首页直接就是dashboard 或者 index页面，菜单权限数据会放在项目初始化时候通过登录系统返回的 tokenID（可以存放到cookie）来请求接口获取，然后存到 sessionStorage ，到这里可能会有个问题，每次刷新页面时候都会重复请求这个接口，是没必要的，可以定义一个登录状态标识符，第一次登录成功后就做一个标识，之后项目页面刷新时候不再进行菜单权限接口请求，退出或者tokenID 过期失效时候，进行重置。

同样在路由卫士这样的地方进行跳转路径检查，白名单放行，无权限地址导到 404。

场景三、（关于 vuex 的数据刷新丢失）

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))
    })
  }
}

场景四、（页面内权限）

通常页面内的增、删、改、查，操作也是需要有对应的权限控制的，所有页面模块的权限数据统一以对象形式在一个数组列表里面，存到 vuex，然后在每个页面的 created 时候，获取并绑定当前页面的 CURD 权限，控制相关操作区域的渲染。

链接: https://fly63.com/article/detial/6002