web前端：pc vue 项目中的菜单权限控制

　　一个数组中的所有元素具有相同的数据类型(在C、C++、java、pascal中都这样。但也并非所有涉及数组的地方都这样，比如在VisualFoxpro中的数组就并没这样的要求)。当然，当数据类型为Variant时，各个元素能够包含不同种类的数据(对象、字符串、数值等等)。可以声明任何基本数据类型的数组，包括用户自定义类型和对象变量。

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

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

　　1.登录

　　2.登录后，依次获取账号tokenId、店铺列表、默认店铺ID、菜单列表

　　3.通过菜单列表生成侧边栏，注意router文件里面定义了全部的页面路由，所以配置新菜单时候需要提供给后端前端定义的页面路径

　　4.menuList数据存起来，可以存在vuex、sessionStorage，这个数据可以用于router里面非白名单页面的拦截比对，如果访问当前账号无权限的页面，可将其跳转404页面

　　5.在路由卫士里面拦截检查

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

　　单点登录类系统，通常会多个项目公用一套登录系统，项目首页直接就是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方法）。

　　exportdefault{

　　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权限，控制相关操作区域的渲染。

　　在C语言中，数组属于构造数据类型。一个数组可以分解为多个数组元素，这些数组元素可以是基本数据类型或是构造类型。因此按数组元素的类型不同，数组又可分为数值数组、字符数组、指针数组、结构数组等各种类别。