vue中如何实现后台管理系统的权限控制的方法步骤
194 浏览量
2020-10-16
11:34:24
上传
评论
收藏 99KB PDF 举报
vue中如何实现后台管理系统的权限控制的方法步骤中如何实现后台管理系统的权限控制的方法步骤
主要介绍了vue中如何实现后台管理系统的权限控制的方法步骤，文中通过示例代码介绍的非常详细，对大家的
学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、前言一、前言
在广告机项目中，角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分，其中根据粒的大小分的更
细：
接口访问的权限控制
页面的权限控制
菜单中的页面是否能被访问
页面中的按钮（增、删、改）的权限控制是否显示
下面我们就看一看是如何实现这些个权限控制的。
二、接口访问的权限控制二、接口访问的权限控制
接口权限就是对用户的校验。正常来说，在用户登录时服务器需要给前台返回一个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
三、页面权限控制三、页面权限控制
在前面已经说到，页面权限控制又分为两种：
菜单中的页面是否能被访问
页面中的按钮（增、删、改）的权限控制是否显示
这些权限一般是在固定页面进行配置，保存后记录到数据库中。
weixin_38660624
- 粉丝: 3
- 资源: 939
最新资源
- 二叉树7-1-1.cpp
- android 9.0 原生模拟器 签名文件
- 技术面试最后反问面试官的话 校招面试非技术问题有哪些 非技术问题如何回答.png
- NB-IOT-BC26全网通模块Altium+ CADENCE +PADS三种格式(原理图SCH+PCB封装库)文件.zip
- 基于微信小程序开发的校园失物招领系统源码毕业设计（优质项目源码）.zip
- 词向量是一种将自然语言中的单词转换为数值向量的技术，它能够捕捉词义和上下文信息
- nmap与masscan的简单使用
- MyBatis动态SQL.pdf
- 基于stm32单片机protues仿真的温湿度控制系统设计（仿真图、源代码）
- 词向量：自然语言处理的基石
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0