❶ 前端权限控制-基于vue-router的动态路由实现
在中后台应用系统开发中，大部分情况下会涉及到用户权限控制，除了后端做权限验证外，前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况，对页面一级的权限控制，常规处理是在页面导航栏通过控制导航显隐控制权限，但在浏览器地址栏输入访问路径依然可以访问，可以用vue-router的动态路由来实现权限控制。
登录成功后通过addRoutes更新路由配置
正常情况下这样就可以实现动态路由控制了，但刷新页面发现会出现404，因为刷新时vue实例重新初始化了，导致动态路由被还原成默认路由，此时需要将权限码存储在本地，在main.js中根据权限码重新生成动态路由
以上步骤基本可以实现动态添加路由并在刷新页面是维持路由状态，但访问根路径会始终跳转到登录页，无法默认跳转到首页，这个问题目前还未想到好的解决方案。
❷ vue 项目路由权限管理实现
项目基于 vue-element-admin 基础之上进行开发，感谢 花裤衩 以及为此项目做出贡献的大佬 [社会社会]！
路由数据由后端控制，前端调用接口返回数据；前端拿到数据处理成可使用的路由结构，然后渲染到页面。
为了能提供更多的功能，后端返回的数据结构是在原来菜单结构基础之上有所改动的。
原路由数据结构：
后端返回数据结构：
路由数据采用多级嵌套结构，基本可以满足需求。
拿到接口返回的数据之后还不能直接使用，需要经过一些处理。
在本地的开发，新增页面时，为了方便开发，获取到后端返回的数据之后用了一个方法来合并数据：
temporaryMenuArray 临时路由数组的结构需要跟后端返回的数据结构一致。
使用 setTemporaryMenu :
合并完临时的路由之后就开始进行路由的处理了。
从上面后端返回的数据结构中可以看出，已经和需要处理成的路由很像了，但还是有一些数据没有必要在专门的系统那里维护，所以需要一些其他数据的皮穗没处理：
routesComponents 为一个手动维护的页面路由文件：
得到的 userCanUseRouteMoles 结构如下：
上面数据中的 type 为2、3层级的 component 已经被替换成对应页面的路由模块了。
得到 userCanUseRouteMoles 之后，其中 name 为 storeManagement:head 的那一层数据是供头部菜单使用的，其 children 的数据才是需要添加的路由数据：
此时的 asyncRoutes 只放了默认匹配的路由，这个是需要放在所有路由的最后的：
至此对路由的处理结束。
处理路由这一步是放在 router.beforeEach 路由全局前置守卫里的，结合原有的逻辑进行了一些判断处理。
因为路由数据是由后端数据处理得到的，只包含和挂载了当前用户能有权限访问的部分，没有权燃纳限访问的路由就没有被 router.addRoutes 添加，所以并没有在路由守卫里对每次路由的跳转都进行校族陪验。
❸ 前端权限控制
前端权限控制分为四个方面的控制
第一点界面控制：用户还未登入就能通过url访问到系统页面，该问题比较好解决通过路由守卫即可判断。
如果用户登入以后用url访问不是属于自己的菜单页，如我没有系统管理这个界面，我去地址栏输入系统管理这个页面的url，前端因该阻止它访问页面。输入url能访问到页面的原因是你的路由配置了这个地址，所以控制界面的方式就是从路由入手，前期我们配置大家都有的路由，其他的路由根据登入系统时后台返回的权限列表数据，动态添加路由。
在登入时我们把权限数据存入vuex中并本地化，通过路由对象可以获取到路由的配置，把那个用户的路由单独添加到路由列表中，使用addroutes添加更改后到路由配置，添加动态路由的方法调用在app.vue的created中，因为每次加载页面都会调用该方法。
第二菜单控制:
根据用户的不同菜单栏也不同，该问题跟动态路由类似登入时拿到数据存入vuex中并本地化，之后在菜单组件列表循环遍历出对应的菜单栏，过于简单就不截图了。
第三按钮控制：
这个控制可以采用自定义组件的方式，例如这个用户没有添加人员的按钮，他只有查看这个人员菜单的权限。在页面上按钮都添加上，但是是否能显示则根据后端传过来的权限数据，该数据在动态路由作为meta数据添加在路由上了，也就是用路由的meta的数据去判断这个按钮是否显示或者禁用或是可用，在页面我们添加按钮我们就加一个action属于为add，我们或者add去比较如果没有add这个权限如果处理。上图
第四请求拦截
请求拦截并不简单的做一个token，而是每个用户对应可以操作的请求放行，不是他可以操作的拦截，如他没有添加的请求则要拦截，前面不是做了按钮的控制吗，为啥还要做这个拦截，按钮控制并不安全，其实他可以通过浏览器直接修改按钮的属性，有人又说有token了不是可以拦截了吗，对，可以拦截不过那时后台拦截，你请求还是发过去了，请求影响系统性能，所以做这个还是有必要的。
请求拦截，根据名字就知道他是在请求拦截器里设置的，在拦截器中可以获取请求方式，根据请求方式与路由中的mate权限对比有就发送请求，如果没有则不发请求
❹ vue 动态路由/路由权限 解决方案
路由权限思路：
1.菜单栏/导航栏(一级权限)
在登录成功后，获取后端的权限数据, 根据铅扮权限数据，展示对应的路由导航或菜单即可;
2.界面的控制
如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面.
如果用户已经登录, 用户手动输入的非权限内的路由地址，则给他跳转到404界面.
3.按钮的搭游控制(二级权限)
在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有.
没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮 禁用or隐藏。
4.请求和响应的控制 （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）
如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截.
login.vue
home.vue (elment-ui)
侧边导航栏
store.js
router.js
动态路需知激销两个地方调用:
1 login.vue 中登录成功后立即执行动态路由函数
2 app.vue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了
思路3：按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。
更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可
import './utils/permission.js' --> main.js中引入文件, 嫌麻烦直接在main.js中写
4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录
❺ vue 按钮 权限控制
在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限。必须当有删除权限时，就显示删除按钮。没有这个权限时，就不显示或者删除这个按钮。通过查找资料，通过vuex来实现这个功能。
在 state 中创建 buttomPermission ，用于保存后台接口返回的权限数据。
setPermission 用于接受数据，将页面权限管理传入到 buttomPermission 对象中。
新建 directives 文件夹，创建 permission.js 文件。
这里使用 inserted 函数，在被绑定元素插入父节点时检测该元素是否有权限。
在按钮猜袜页面引入和定义 permission指令，并且在buttom中写入指令，绑定指令中相对于的值。
在 permission 指令,通过 bindings 获取该按钮绑定的value值，然后在 buttomPermission 对象中找到，然后判断是否有权限，如果没有权限，则删除穗兄激该节点。
将状态管理数据，通过 setPermission 方法传入到权限管理中
总的来说，就是通过 vuex 定义一个 buttomPermission 权限状态对象，然后再创建一个 permissions 指令，通过对每个 buttom 按钮使用 permissions 指令，并且绑定该按尘正钮特定意义的值。然后在 permission.js 文件中，获取当前 value 值，从 buttomPermission 中得到当前按钮是否有权限，没有则直接删除掉当前按钮节点。
❻ vue项目权限管理
首先，权限管理 般需求是两个： 权限和按钮权限。
前端 案会把所有路由信息在前端配置，通过路由守卫要求 户登录， 户登录后根据 过滤出路由表。 如我会配置 个 asyncRoutes 数组，需要认证的 在其路由的 meta 中添加 个 roles 字段，等获取 户 之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该 户能访问的 ，最后通过 router.addRoutes(accessRoutes) 式动态添加路由即可。
后端 案会把所有 路由信息存在数据库中， 户登录的时候根据其 查询得到其能访问的所有 路由信息返回给前端，前端再通过 addRoutes 动态添加路由信息。
按钮权限的控制通常会实现 个指令，例如 v-permission ，将按钮要求 通过值传给v-permission指令，在指令的 moutned 钩 中可以判断当前 户 和按钮是否存在交集，有则保留按钮， 则移除按钮。
路由守卫 permission.js ：
路由 成## permission.js ：
动态追加路由## permission.js ：
服务端返回的路由信息如何添加到路由器中？
❼ 如何通过界面修改左侧菜单栏权限vue
要通过Vue的前端界面修改左侧菜单栏的权限，您可以将菜单项数据存储在Vue组件的data属性中，并让稿姿根据用户不同的权限来动态设置菜单的显示方式。具体步骤如下：
1. 在Vue组件中创建一个data属性，用来存储菜单项的数据。例如：
```
data() {
return {
menuItems: [
{ name: '仪表盘', icon: 'el-icon-menu', path: '/dashboard', canView: true },
{ name: '用户管理', icon: 'el-icon-user', path: '/users', canView: false },
{ name: '文章管理', icon: 'el-icon-document', path: '/article', canView: true }
]
}
}
```
2. 使用v-for循环渲染menuItems数组中的菜单项，并使用v-if根据canView属性动态设置菜单项的显示方式。例如：
```
<el-menu>
<el-menu-item v-for="item in menuItems" :key="item.path" v-if="item.canView">
<i :class="item.icon"></i>
<span slot="title">{{ item.name }}</span>
</el-menu-item>
</el-menu>
```
在这个示例中，只有canView属性为true的坦绝菜单项才会被渲染出来。
3. 在Vue组件的methods属性中添加一个方法，用来在界面上修改菜单项的权限。例如：
```
methods: {
changeMenuView(item) {
item.canView = !item.canView;
}
}
```
在这个示例中，changeMenuView方法会根据传入的菜单项item对象的canView属性值进行取反操作，实现菜单项权限的修改。
完成上述操作后，您就可以通过界面修改菜单项的权限，从而实现动态显示和隐藏的效果。这种方法可以使应用程序更加灵活，便于根据用户角色对菜单敬蠢进行动态控制。