怎么在Vue中实现权限控制

　　介绍

这期内容当中小编将会给大家带来有关怎么在Vue中实现权限控制,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

<强>一、前言

1,接口访问的权限控制

2,页面的权限控制

<李>

菜单中的页面是否能被访问

<李>

页面中的按钮(增、删、改)的权限控制是否显示

下面我们就看一看是如何实现这些个权限控制的。

<强>二,接口访问的权限控制

接口权限就是对用户的校验。正常来说,在用户登录时服务器需要给前台返回一个令牌,然后在以后前台每次调用接口时都需要带上这个令牌,然后服务端获取到这个令牌后进行比对,如果通过则可以访问。

现有的做法是在登录成功的回调中将后台返回的令牌直接存储到sessionStorage,然在请求时将牌取出放入头中传给后台,代码如下:

http({美元。 　　,,,,方法:,& # 39;得到# 39; 　　,,,,url:, & # 39;测试/查询? id=20 & # 39; 　　,,,,withCredentials:,真的, 　　,,,,头:,{ 　　,,,,,令牌:,sessionStorage.getItem(& # 39;标记# 39;), 　　,,,,,名字:,sessionStorage.getItem(& # 39;名字# 39;),,//应后台需求传的用户名 　　,,,,} 　　,,,})(response =祝辞,{ 　　,,,,//请求成功后的操作 　　,,,})

后来在一些文章中发现axios可以在拦截器中直接将牌塞入config.headers。授权中,作为全局传入。下面是代码部分:

//main.js 　　import  axios 得到& # 39;axios& # 39;//,实例化Axios,并进行超时设置 　　const  service =, axios.create ({ 　　超时才能:5000 　　}）//baseURL=//,axios.defaults.baseURL  & # 39; https://api.github.com& # 39;;//,http  request 拦截器//,每次请求都为http头增加授权字段,其内容为令牌 　　service.interceptors.request.use ( 　　config 才能=祝辞,{ 　　,,,if  (store.state.user.token), { 　　,,,,,config.headers.Authorization =, token  $ {store.state.user.token} '; 　　,,,} 　　,,,return 配置 　　,,}, 　　err 才能=祝辞,{ 　　,,,return  Promise.reject (err) 　　,,} 　　); 　　export  default 服务

<强>三,页面权限控制

在前面已经说到,页面权限控制又分为两种:

<李>

1菜单中的页面是否能被访问

<李>

2页面中的按钮(增、删、改)的权限控制是否显示

这些权限一般是在固定页面进行配置,保存后记录到数据库中。

按钮权限暂且不提,页面访问权限在实现中又可以分为两种方式:

<李>

1显示所有菜单,当用户访问不在自己权限内的菜单时,提示权限不足

<李>

2只显示当前用户能访问的权限内菜单,如果用户通过URL进行强制访问,则会直接进入404

既然展现出来后不能点,那算几个意思,逗我玩儿呢?所谓眼不见为净,综合考虑后,肯定是方案二比较符合良好的用户体验。

好,我们现在梳理一下大致的页面访问权限的流程:

在这里插入图片描述

在对流程梳理完成后我们开始进行详细的编写。

<强> 1,创建路由表

创建路由表实际上没有什么难度,照着vue-router官方文档给的示例直接写就行了。但是因为有部分页面是不需要访问权限的,所以需要将登录,404年,维护等页面写到默认的路由中,而将其它的需要权限的页面写到一个变量或者一个文件中,这样可以有效的减轻后续的维护压力。

下面将索引。js的代码贴上,异步路由将适量减少,以免占过多篇幅。

//,/index.js路由器 　　import  Vue 得到& # 39;vue # 39; 　　import  Router 得到& # 39;vue-router& # 39; 　　import  App 得到& # 39;@/应用# 39; 　　import  store 得到& # 39;. ./存储/指数# 39; 　　 　　Vue.use(路由器);//手动跳转的页面白名单 　　const  whiteList =, ( 　　,& # 39;/& # 39; 　　];//默认不需要权限的页面 　　const  constantRouterMap =, ( 　　,{ 　　,,路径:& # 39;/& # 39; 　　,,名字:& # 39;登录& # 39;, 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/登录# 39;],,解决) 　　}, 　　,{ 　　,,路径:& # 39;/指数# 39; 　　,,名字:& # 39;nav.Home& # 39; 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/指数# 39;],,解决) 　　}, 　　,{ 　　,,路径:& # 39;/templateMake& # 39; 　　,,名字:& # 39;模板制作& # 39;, 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/模板/templateMake& # 39;],,解决) 　　}, 　　,{ 　　,,路径:& # 39;/programMack& # 39; 　　,,名字:& # 39;节目制作& # 39;, 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/模板/programMack& # 39;],,解决) 　　}, 　　,{ 　　,,路径:& # 39;/发布# 39; 　　,,名字:& # 39;节目发布& # 39;, 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/程序/发布# 39;],,解决) 　　,} 　　]//注册路由 　　时间=export  const  router  new 路由器({ 　　,路线:constantRouterMap 　　});//异步路由(需要权限的页面) 　　export  const  asyncRouterMap =, ( 　　 　　,{ 　　,,路径:& # 39;/资源# 39; 　　,,名字:& # 39;nav.Resource& # 39; 　　元才能:{ 　　,,,许可:[] 　　,,}, 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/资源/资源# 39;],,解决) 　　}, 　　,{ 　　,,路径:& # 39;/模板# 39; 　　,,名字:& # 39;nav.Template& # 39; 　　元才能:{ 　　,,,许可:[] 　　,,}, 　　组件:才能,(解决),=祝辞,要求((& # 39;@/组件/模板/模板# 39;],,解决) 　　}, 　　,{ 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

怎么在Vue中实现权限控制