vue element后台鉴权流程分析

前言：

最近项目遇到一个管理系统，感觉权限配置挺有意思，记录一下流程实现的过程，便于自己学习以及整理思路，部分思路整合在代码的注释中：

路由拦截鉴权常用的两种方法

1：路由拦截：单纯给路由加字段标识符，通过路由拦截实现
2：动态路由：第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置

比较：

路由拦截实现方式比较简单，只需要简单的在router.beforeeach中根据路由配置信息过滤页面是否有权限前往改组件，若相对于的权限不够则不前往相应的组件

动态路由实现相对比较复杂，并且需要后端的配合，本质是路由配置表分成两部分，相应的不同用户登录的时候，是根据用户权限信息过滤筛选除路由配置表，动态添加，而用户没有权限的部分则不渲染，更适合相对比较大型的后台系统

注：本篇内容主要介绍动态路由鉴权实现方式

与动态路由相关的通常有以下几个文件：

• router.js
• permission.js(全局的路由拦截文件)
• store.js

router.js

router.js的路由配置表可以分为两部分，公共路由以及动态权限路由，动态权限路由可以放在前端，鉴权的时候前端自己进行数组的过滤，也可以放在后端过滤，思路相同，下面介绍的是配置表都放在前端的

上面这个是一般项目的路由配置，现在我们需要做鉴权所以需要把路由配置表稍微拆分一下，拆成以下两个数组：

permission.js permission文件主要做全局的路由拦截，以及路由根据用户权限动态过滤等功能，那么这部分内容主要设涉及的就是两个问题 什么时候去处理动态路由什么条件去处理路由

 

store.js

退出登录：

结尾：

代码一大堆，其实思路很简单，不过是拿到路由配置表，过滤数组，动态添加而已

项目参考github：vue-element-admin

到此这篇关于vue element后台鉴权流程分析的文章就介绍到这了,更多相关vue element鉴权内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！