2021-05-25

前言

 在前端后台项目中，都会遇到权限的问题， 前端的权限大概都是分为，菜单控制，界面控制，按钮控制，请求和响应和控制， 真正的权限都是依靠后端来处理的，前端对一些权限的处理可以有效的减少对服务器的请求。

菜单控制

 请求过程中，会得到权限的数据，需要想后端返回数据的支持，前端根据权，展示对应的菜单。


 在登录的时候，拿取到后端权限的数据，VUEX中， 通过this.$store.commit      （）存入全局中， 一开始页面那侧边二级菜单是空的，通过引入这个方法到该页面中，在计算属性 中把这个属性给展开，在create中，把这个方法赋给空的二级菜单中，这样菜单就会根据后台传过来的权限动态添加菜单。

把这数据全局中的数据放到sess中可以防止刷新后登录后权限丢失问题

 退出时清空sess和VUEX数据，通过sess.clear清除数据，因为全局数据放在sess中的，通过自动刷新页面同时清空VUEX的数据。

界面控制

1.如果没有登录，手动跳转地址，重定向到登录
   在登录的时候拿到后端的toke令牌数据，可以存储到sess中，在全局router在中，利用全局路由首位中的from 来判断如果是从登录页面来的主页的话直接放行（next），不是的话判断toke如果有toke的值，如果没有跳转到登录页面，如果没有的话则跳转到登录页面。

2.已经登录，输入到没有权限的地址，跳到404
  主要的是通过动态路由来添加的，在登录的时候获取到后端传过来该用户权限下的路由，把一些需要权限的一些路由展现出来， 先把路由提取出去到如下图

在登录页面导入 store {{}} 的这个模块，并且调用这个路由下的在这个函数方法。
调用这个方法前，因为后端拿去回来是一个字符传的路由需要和前端约定好的一直，所以先重新赋值

 然后按照返回来的值，拿去到的值，遍历权限下的菜单，后增到childen 这样，如果权限里面没有这个页面点击的时候会自动跳转到404

因为在登录页面拿去的数据，刷新后（已经过了登录页面这个逻辑），权限下的后增的的就又为空了，所以提前在APP.vue文件中created调用以下这个方法，可以防止这个发生

按钮控制

在菜单中，展示对应的按钮，如增删改，或者把按钮给禁用掉
在不需要展示得按钮上添加自定义指令，如下图

		自定义指令之后在新创建的自定义之类文件中，运用，自定义指令中第二个参数为一个对象，来获取到指令下的一个action属性，在路由中增加元信息来判断，这个用户是否有个功能，如果没有就是可以隐藏，或者禁掉。

请求响应和控制

用户通过非常规的操作，比如通过控制面板修改成启动状态，此时发的请求应该被前端拦截。

这个可以请求的过程中，利用响应请求来判断用户是否有这个权限，如果没有这个权限，前端直接拦截下来，不用请求到后端。