关于VUE做后台的权限控制

因为是PHP和前端都是我自己写，以前一直使用后端控制权限进行重定向。因为这次使用的vue进行一个商户管理端的开发，临时要求加入权限，不得已下只能使用前端进行权限控制

 其中使用到vuex+sessionStorage保存登录信息

vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于全局变量，刷新之后，里面的数据就会恢复到初始化的状态。

所以我把登录信息同时也保存在sessionstorage里 页面刷新时vuex获取一次数据

首先登录前只有登录 注册 修改密码路由

进入登录页面->输入账号密码登录->获取登录信息->保存vuex 和sessionstorage

然后进行页面跳转 使用钩子函数beforeEach判断是否登录 未登录只能进入登录 注册 修改

首次登录或刷新进入函数动态生成路由并存入vuex

stroe.gettrts.role有两种值  === ‘all’时为管理员 有所有权限 把上图powerRouter全部动态生成路由

为权限码数组时候遍历powerRouter数组筛选符合的权限路由进行生成路由 达成权限管理的目的，未生成路由的跳转404页面

动态生成路由是为了防止直接输入url进行翻墙

动态生成菜单就是根据生成的newRouter遍历渲染出来

当然 我在后端处也做了权限检测