Vue 实现前端权限控制

最新推荐文章于 2023-08-09 09:50:30 发布

Web全栈开发

最新推荐文章于 2023-08-09 09:50:30 发布

阅读量386

点赞数

分类专栏：前端前端工程师前端程序员

本文链接：https://blog.csdn.net/weixin_45556713/article/details/101452755

版权

本文介绍了Vue中实现前端权限控制的三个主要部分：登录权限控制、页面权限控制和接口权限控制。登录权限控制通过axios拦截器实现token验证；页面权限控制包括菜单页面访问和按钮权限显示，使用router.beforeEach()和Vue指令v-permission；接口权限控制作为最后一道防线，防止越权请求。

摘要由CSDN通过智能技术生成

前言
首先我们确定的权限控制分为三大部分，其中根据粒度大小分的更细：

登录权限控制
页面权限控制
菜单中的页面是否可以被访问
页面中的按钮 (增、删、改、查)的权限控制是否显示
接口权限控制
一、登录权限控制
登录访问权限控制是对用户的校验。在用户登录成功之后，后台将返回一个token，之后前端每次进行接口请求的时候，都要带上这个token。后台拿到这个token后进行判断，如果此token确实存在并且没有过期，则可以通过访问。如果token不存在或后台判断已过期，则会跳转到登录页面，要求用户重新登录获取token。

做法一

在用户登录成功的回调中将后台返回的token直接存储到localStorage，然后同步配置请求默认参数的形式将token取出放入headers中传给后台。代码如下：

let axiosOptions = {
method,
url,
data,
timeout,
// ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’。default json
responseType,
// 请求头内追加authToken属性
headers: {
authtToken: window.localStorage.getItem(base/token$$)
}
}
复制代码
做法二

当前项目中使用axios.interceptors.request.use设置发送请求前的拦截,直接将token塞入req.headers.authToken中，作为全局传入。代码如下：