登录权限流程图

前言

首先，我们确定的权限控制分为三个部分，其中细节按照粒度更详细：

登录权限控制是否可以访问页面权限控制菜单中的页面。页面中按钮(添加、删除、更改和查询)的权限控制显示界面权限控制。

登录访问控制是对用户的验证。用户登录成功后，后台会返回一个令牌，然后前端每次做接口请求都会带来这个令牌。后台拿到这个令牌后，就可以判断了。如果此令牌确实存在并且尚未过期，则可以通过访问它。如果令牌不存在或者后台判断已经过期，会跳转到登录页面，要求用户重新登录获取令牌。

练习1

在用户登录成功的回调中，后台返回的令牌直接存储在localStorage中，然后以同步配置请求的默认参数的形式取出令牌，以头的形式发送给后台。代码如下：

让axiosOptions={方法，url，数据，超时，//'arraybuffer '，' blob '，' document '，' json '，' text '，' stream ' .默认json响应类型，//添加authToken属性Headers : { authttoken : window . local storage . getitem(` base/token $ `) } }练习2

在当前项目中，axios.interceptors.request.use用于在发送请求之前设置拦截，令牌作为全局传入直接填充到req.headers.authToken中。代码如下：

//axios.interceptors.request.userequest拦截：配置信息发送请求//axios . interceptors . response . use响应拦截：配置请求axios . interceptors . request . use返回的信息(req={ req . headers . auth Token=window . local storage . getitem(` base/)Token $ `)return req }，error={return promise。拒绝(错误)})登录中涉及的知识点

vuex localStorage:通过vuex localStorage在本地持久存储令牌(令牌(令牌：服务器创建唯一标识用户身份的密钥)。Axios:请求拦截和验证令牌，可以使用API : axios . interceptors . request . use of axios，或者通过添加默认参数在请求头中添加令牌。二、页面权限控制

如上所述，页面权限控制分为两种类型：

菜单中的页面是否可以访问由页面中按钮(添加、删除、更改和检查)的权限控制。

页面访问权限的实现可以分为以下两种方案：

方案一：初始化时挂载所有路由，每次路由跳转前检查。方案二：只挂载当前用户拥有的路由。如果用户通过URL强制访问，会直接进入404，相当于从源头控制。前者的缺点很明显。检查每一次路由跳转都是对计算资源的浪费。此外，理论上不应安装用户无权访问的路由。

后者解决了上述问题，但在按需挂载路由时，需要知道用户的路由权限，即用户登录时，需要知道当前用户拥有哪些路由权限。

所以一定是方案二更符合好的用户体验。

项目中的菜单权限控制

1.权限中涉及的元属性

NoRequireAuth:真挂载管理器未经许可直接释放：True不显示2.router.beforeEach()在操作权限树中拦截路由的钩子。

不需要权限的路由会被直接释放。在meta中的noRequireAuth和manageFree在没有权限控制的情况下进入路由之前，它们请求获取要从后端显示的菜单。后端根据令牌判断当前用户权限，返回相应菜单。前端递归比较决定了要显示的最终菜单列表

通过路由器动态添加所有符合权限的路由按钮级权限控制(Vue指令v-permission)

1.每个模块有四个权限，分别是查询(获取)、添加(发布)、更新(投放)和删除(删除)。2.十进制和二进制用于表示当前模块拥有的权限。1111(15)，转换后的二进制与权限的关系表示：从右到左计数(1表示有权限，0表示没有权限)，第一个表示查询，第二个表示添加，第三个表示更新，第四个表示删除。例如：二进制1111(15)代表四种权限：查询、添加、更新和删除。

3.当判断对应模块没有这个权限时，移除当前按钮的dom元素。

使用示例：

El-button @ click=' handle click ' v-permission : modulename . post已添加/El-button El-button @ click=' handle click ' v-permission . delete=' modulename ' delete/El-button III。接口访问权限控制

最后，将请求控制作为最后一道防线，路由可能配置错误，按钮可能会忘记添加权限。在这种情况下，请求控制可以作为掩护，未经授权的请求将在前端被拦截。

前端协议接口采用RESTful风格，也对应查询(get)、添加(post)、更新(put)、删除四种权限。对于查询操作，如果只有一个参数，应该使用get请求；如果有多个参数，则需要改为post request，但是应该在url后添加/query，告诉服务器当前正在执行查询操作，这可以与普通的add (post)请求区分开来。同样，如果在删除用户时有多个参数，那么DELETE请求也会变为POST请求，并在其后添加/delete以区别于正常的删除操作。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。