这篇文章将为大家详细讲解有关Vue2.0中怎么实现用户权限控制，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
运行
//开发
npm run dev
//构建
npm build概述
整体思路
会话开始之初，先初始化一个只有登录路由的Vue实例，在根组件created钩子里将路由定向到登录页，用户登录成功后前端拿到用户token，设置axios实例统一为请求headers添加{"Authorization":token}实现用户鉴权，然后获取当前用户的权限数据，主要包括路由权限和资源权限，之后动态添加路由，生成菜单，实现权限指令和全局权限验证方法，并为axios实例添加请求拦截器，至此完成权限控制初始化。动态加载路由后，路由组件将随之加载并渲染，而后展现前端界面。
为解决浏览器刷新路由重置的问题，拿到token后要将其保存到sessionStorage，根组件的created钩子负责检查本地是否已有token，如果有则无需登录直接用该token获取权限并初始化，如果token有效且当前路由有权访问，将加载路由组件并正确展现；若当前路由无权访问将按路由设置跳转404；如果token失效，后端应返回4xx状态码，前端统一为axios实例添加错误拦截器，遇到4xx状态码执行退出操作，清除sessionStorage数据并跳转到登录页，让用户重新登录。
最小依赖原则
Vue-Access-Control的定位是单一领域解决方案，除了Vue/Vue-Router/axios之外没有其他依赖，理论上可以无障碍的应用到任何有权限控制需求的Vue项目中，项目基于webpack 模板开发构建，大多数新项目可以直接基于检出代码继续开发。需要说明的是，项目额外引入的Element-UI和CryptoJS仅用于开发演示界面，他们不是必须且与权限控制毫无关系，项目应用中可以自行取舍。
目录结构
src/
|-- api/ //接口文件
| |-- index.js //输出通用axios实例
| |-- account.js //按业务模块组织的接口文件，所有接口都引用./index提供的axios实例
|-- assets/
|-- components/
|-- router/
| |-- fullpath.js //完整路由数据，用于匹配用户的路由权限得到实际路由
| `-- index.js //输出基础路由实例
|-- views/
|-- App.vue
·-- main.js数据格式约定
路由权限数据必须是如下格式的对象数组，id和parent_id相同的两个路由具有上下级关系，如果希望使用自定义格式的路由数据，需要修改路由控制的相关实现。
[
{
"id": "1",
"name": "菜单1",
"parent_id": null,
"route": "route1"
},
{
"id": "2",
"name": "菜单1-1",
"parent_id": "1",
"route": "route2"
}
]资源权限数据必须是如下格式的对象数组，每个对象代表一个RESTful请求，支持带参数的url。
[
{
"id": "2c9180895e172348015e1740805d000d",
"name": "账号-获取",
"url": "/accounts",
"method": "GET"
},
{
"id": "2c9180895e172348015e1740c30f000e",
"name": "账号-删除",
"url": "/accountmember
解释：两个名词之间夹带一个参数，参数通常表示第一个名词的id对于第一种格式需要注意的是，如果你要发起一个url为"/aaa/bbb"的请求，默认会被处理成"/aaa/**"进行权限校验，如果这里的”bbb”并不是参数而是url的一部分，那么你需要将url改成"/aaa/bbb/"，在最后加一个”/“表示该url不需要转化格式。
拦截器的具体实现见App.vue中的setInterceptor()方法。
如果你的项目还需要其他的通配符格式，只需要在拦截器中实现对应的检测和转化方法就可以了。
演示及说明
演示说明：
DEMO项目中演示了动态菜单、动态路由、按钮权限、请求拦截。
演示项目后端由rap2生成mock数据，登录请求通常应该是POST方式，但因为rap2的编程模式无法获取到非GET的请求参数，因此只能用GET方式登录，实际项目中不建议仿效；
另外登录后获取权限的接口本来不需要携带额外参数，后端可以根据请求头携带的token信息实现用户鉴权，但因为rap2的编程模式获取不到headers数据，因此只能增加一个”Authorization”参数用于生成模拟数据。
测试账号:
1. username: root
password: 任意
2. username: client
password: 任意关于Vue2.0中怎么实现用户权限控制就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
