vue—管理系统如何设置配置路由权限管理

vue—管理系统如何设置配置路由权限管理

---

如何使用

1. 一般来说会在main.js中通过引入js文件来实现，而不是直接在main.js中设置，我这里是在main.js里设置：

import './permission'

2.在permission.js文件里

代码如下（示例）：

import router from './router'

---

3.使用路由守卫：

代码如下（示例）：

router.beforeEach(async(to, from, next) => {
});

---

4.在路由守卫里一般还会进行token判断，没有token不给予放行。

代码如下（示例）：

next(`/login?redirect=${to.path}`)
NProgress.done()

这样不管路由跳向何处，最后还是会跳到登录页

---

5.如果有token

代码如下（示例）：

next()

直接放行

---

6.也可以设置白名单：

代码如下（示例）：

if (whiteList.indexOf(to.path) !== -1) {
   next()
 }

// 路由白名单
const whiteList = ['/login', '/auth-redirect', '/Examine']

---

7.在permission.js文件里

代码如下（示例）：

import router from './router'

我这里设置了三个路由页面给予放行。