Vue后台管理项目权限处理思路

不同角色权限的菜单栏渲染思路

根据后台返回的right数据渲染角色菜单， 在login页面请求数据时使用this.$store.commit调用该方法将将其存入vuex里，并对其做本地化处理，需要事先在mutation中定义相应添加的方法，然后在home页面进行使用时，使用mapstate将数据…mapstate存入computed（…mapState([‘rightList’]）里进行处理，然后v-for渲染时直接使用即可。
注意：如果不进行本地化处理，页面刷新后将会丢失菜单栏信息，因为其信息是在login页进行获取并存储的。 退出时需要调用sessionstorage.clear/remove清除本地数据，然后让页面重新加载，即可清除vuex中的数据。

2.根据角色权限实现动态添加路由

// 定义路由规则
const reportRule = {
  path: '/reports', component: Report
}
const orderRule = {
  path: '/orders', component: Order
}


// 定义二级权限字段与路由规则之间的对应关系
const ruleMapping = {
  'reports': reportRule,
  'orders': orderRule
}

// 定义动态添加路由的方法并导出至login页面进行使用
//  根据二级权限，对路由规则进行动态添加
export function initDynamicRoutes () {
  // router对象中的options下的routes就是所有的路由规则
  const currentRoutes = router.options.routes
  // 假定我们要向其中第2个路由中的children添加对应路由
  const rightList = store.state.rightList
  // 双重foreach遍历到其二级权限
  rightList.forEach(item => {
    // 此时的item对应后台返回数据中的一级权限
    // 通过循环一级权限下的children节点拿到所有二级权限
    item.children.forEach(item => {
      // 通过映射关系拿到对应路由规则 item.path就是二级权限字段
      const tem = ruleMapping[item.path]
      // 将对应路由规则添加到当前路由对象
      //此时可以向tem添加meta节点
      //tem.meta = '后台返回数据对应的权限节点数据'
      currentRoutes[2].children.push(tem)
    })
  });
  // push完后 调用对应api进行路由规则的添加
  router.addRoute(currentRoutes)
}

调用时机：登录成功后调用initDynamicRoutes()
总体思路就是根据后台返回的权限数据来判断该用户是否具有该路由权限，无权限则直接404。而动态添加路由的思路是拿到router实例上的routes路由规则数据，对比后台数据后对routes的路由数据进行添加，然后调用router.addRoute方法将最新的路由规则添加到路由实例对象中。

问题： 如果我们重新刷新的话动态路由就会消失，动态路由是在登录成功之后才会调用的，刷新的时候并没有调用，所以动态路由没有添加上

解决： 可以在app.vue中的created中调用添加动态路由的方法。

3.页面按钮的控制
虽然用户可以看到某些界面了， 但是这个界面的一些按钮该用户可能是没有权限的。 因此， 我们需要对组件中的一些按钮进行控制， 用户不具备权限的按钮就隐藏或者禁用， 而在这块的实现中， 可以把该逻辑放到自定义指令中

比如我们可以根据后端返回的数据right来判断用户有什么权限，如下图

添加自定义指令 控制按钮

总体思路就是通过自定义指令在其指令内部逻辑实现对后台节点数据的对比判断，并对绑定该指令的元素进行相应操作。
具体实现是通过在自定指令上的action、effect等信息，告诉指令内部，该按钮应具备哪些权限判断条件，比如add，如果后台权限信息有add，那么该用户具有add权限，则指令内部不做逻辑处理，如果没有，则在页面上移除该按钮。其他以此类推。

4.axios请求头的设置
注：req实际上就是请求对象，处理完相应逻辑后必须return出去，否则无法进行请求。

请求控制
除了登录请求都得要带上token ， 这样服务器才可以鉴别你的身份
asiox的请求拦截器设置：

如果发出了非权限内的请求， 应该直接在前端范围内阻止， 虽然这个请求发到服务器也会被拒绝

非权限内的请求：比如a用户是不能够操作该页面的按钮的，但是他通过f12调试把按钮改为可点击，如果我们不对这个请求进行处理，那么这个请求就会发送出

总体思路就是根据restful的请求方式，设置一个映射函数，在请求头中我们可以通过restful的请求方式来判断该用户在进行哪种操作，再在用户的权限中查找他是否有进行该操作的权限，如果没有就报错。

响应控制
得到了服务器返回的状态码401, 代表token 超时或者被篡改了，此时应该强制跳转到登录界面