基本流程：登录后保存token

是否有token

有token

1. 判断跳转页是否是登录页面
2. 是----->直接跳转到主页
3. 否----->放过通行

 

没有token

1. 　　判断跳转的页面是否需要token,即跳转页是否在白名单　　

　　　　是---->翻过通行

　　　　否---->跳转到登录页

 

一般在项目根目录中新增permission.js文件，用于进行判断token,

一般在路由跳转的时候才能够进行权限拦截，能够拦截路由跳转的是路由守卫

因此需要导入路由实例对象   import router from '@/router' // 引入路由实例

token值需要从store中取得，import store from '@/store' // 引入vuex store实例

在跳转的时候需要有进度条显示，这里用到了nprogress

1、先简单介绍一下beforeEach，它是Vue-router 的钩子函数，有三个参数,分别是：
1.1）to:router 即将进入的路由对象
1.2）from:当前导航即将离开的路由
1.3）next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed
next()    放行

next(false)   跳转终止

next(地址)  跳转到某个地址

to.path()   访问即将要跳转的地址

 

 

import router from '@/router' import store from '@/store' import NProgress from 'nprogress' import 'nprogress/nprogress.css' const whiteList = ['/login', '/404'] // 路由前置守卫 router.beforeEach((to, from, next) => {   NProgress.start()   if (store.getters.token) {     if (to.path === '/login') {       next('/')     } else {       next()     }   } else {     if (whiteList.indexOf(to.path) > -1) {       next()     } else {       next('/login')     }   }   NProgress.done() }) // 路由后置守卫 router.afterEach(function() {   NProgress.done() })