没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Vue中实现权限控制的方法示例中实现权限控制的方法示例
主要介绍了Vue中实现权限控制的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟
随小编过来看看吧
一、前言一、前言
在广告机项目中,角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更
细:
1、接口访问的权限控制
2、页面的权限控制
菜单中的页面是否能被访问
页面中的按钮(增、删、改)的权限控制是否显示
下面我们就看一看是如何实现这些个权限控制的。
二、接口访问的权限控制二、接口访问的权限控制
接口权限就是对用户的校验。正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都
需要带上这个Token,然后服务端获取到这个Token后进行比对,如果通过则可以访问。
现有的做法是在登录成功的回调中将后台返回的Token直接存储到sessionStorage,然在请求时将Token取出放入headers中传
给后台,代码如下:
this.$http({
method: 'get',
url: 'test/query?id=20',
withCredentials: true,
headers: {
token: sessionStorage.getItem('token'),
name: sessionStorage.getItem('name') //应后台需求传的用户名
}
}).then(response => {
//请求成功后的操作
})
后来在一些文章中发现axios可以在拦截器中直接将Token塞入config.headers.Authorization中,作为全局传入。下面是代码部
分:
//main.js
import axios from 'axios'
// 实例化Axios,并进行超时设置
const service = axios.create({
timeout: 5000
})
// baseURL
// axios.defaults.baseURL = 'https://api.github.com';
// http request 拦截器
// 每次请求都为http头增加Authorization字段,其内容为token
service.interceptors.request.use(
config => {
if (store.state.user.token) {
config.headers.Authorization = `token ${store.state.user.token}`;
}
return config
},
err => {
return Promise.reject(err)
}
);
export default service
三、页面权限控制三、页面权限控制
在前面已经说到,页面权限控制又分为两种:
1菜单中的页面是否能被访问
2页面中的按钮(增、删、改)的权限控制是否显示
资源评论
weixin_38659622
- 粉丝: 9
- 资源: 978
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功