vue 全局路由守卫

vue 项目中经常用到全局守卫，判断是否有token,页面白名单等功能开发，

//注册全局守卫，作用是路由跳转前对路由进行判断，防止未登陆的用户跳转到其他页面去

import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css'
import store from '@/store'
// 在守卫中引入token
import { getQueryString } from '@/utils'
import { getToken, setToken } from '@/utils/auth'
// import { setToken, getToken } from '@/utils/auth'
// 路由白名单
const whiteList = [
  '/login'
  // '/home',
  // '/toLogin',

] // no redirect whitelist

export default router => {
  // 导航守卫,首先获取token，如果有token则判断路由是不是==login，如果在则放行，如果！==login，看看判断Vuex获取用户信息id,如果id为空则获取用户信息，如果id不为空则直接放行，
  // 如果没有token，则判断该路由是不是在白名单内，如果不在则回登录页面。如果在白名单内则直接放行。
  router.beforeEach((to, from, next) => {
    // 显示进度条
    NProgress.start()
    // console.log('路由跳转打印：', to.path)
    // 获取token
    const hasToken = getToken()

    const tempToken = getQueryString('token')
    console.log(tempToken)

    if (to.path === '/home/detail' && tempToken && tempToken.length > 0) {
    
      setToken(tempToken)
      store.dispatch('getInfo').then(() => {
        next()
      })
    } else if (hasToken) {
      // debugger
      // console.log(to.path)
      // 如果在登录页
      if (to.path === '/login') {
        next({ path: '/' })
        // 进度条完成
        NProgress.done()
      } else {
        // 如果不在登录页，判断vueX中的用户id是否为空
     
        if (store.getters.id === null) {
          const data1 = JSON.parse(localStorage.getItem('data'))

          if (data1) {
            store.commit('SET_TOKEN', data1.token)
            store.commit('SET_MOBILE', data1.mobile)
            store.commit('SET_USER_NAME', data1.nickname)
            store.commit('SET_JOBNUMBER', data1.jobNumber)
            store.commit('SET_ID', data1.id)
            store.commit('SET_AVATAR', JSON.parse(sessionStorage.getItem('avatar')))
          }
          // console.log(data1)
          // 如果为空则
          // debugger
          // await store.dispatch('getInfo')
          // next({ …to, replace: true })中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。
          // 因此next({ …to, replace: true })可以写成next({ …to })，不过你应该不希望用户在addRoutes()还没有完成的时候，可以点击浏览器回退按钮搞事情吧。
          // next({ ...to, replace: true })
          // next({ path: '/' })
          next()
        } else {
          // 如果不为空则放行
          next()
        }
      }
    } else {
      /* has no token*/
      if (whiteList.indexOf(to.path) !== -1) {
        // 如果在白名单内则直接放
        // in the free login whitelist, go directly
        next()
      } else {
        // 没有token,也不在白名单内则回登录页面
        // console.log(3)
        next(`/login?redirect=${to.path}`)
        // next(`/login`)
        // next()
        NProgress.done()
      }
    }
  })
  router.afterEach((to, from) => {
    NProgress.done()
  })
}