登录token处理

基本流程：登录后保存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()

})