## 设置路由拦截
### 集成`nprogress`
```shell
$ yarn add nprogress
```
### 新建文件`/src/permission.js`
```javascript
import router from './router'
import store from './store'
import storage from 'store'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import {ACCESS_TOKEN} from './store/mutation-types'
Nprogress.configure({showSpinner: false})
// 登录页面路由路径
const loginRouterPath = '/login'
// 白名单
const whiteList = [loginRouterPath]
// 默认路由路径
const defaultRouterPath = '/'
router.beforeEach((to, from, next) => {
Nprogress.start()
// 如有token
if (storage.get(ACCESS_TOKEN)) {
// 已经登录,重复访问登录页面,跳转到默认页面
if (to.path === loginRouterPath) {
next({path: defaultRouterPath})
}else{
next()
}
}else{
if(whiteList.includes(to.path)){
// 在免登录白名单中,可以直接进入
next()
}else{
next({path:loginRouterPath, query:{redirect:to.fullPath}})
}
}
})
router.afterEach(()=>{
Nprogress.done()
})
```
### 在`/src/main.js`中引入`permission`
```javascript
...
import './permission'
...
```