vue-router使用以及搭配路由守卫拦截处理

常用在vue项目中使用vue-router进行路由管理，也会做一些权限以及路由守卫拦截。

1. 如果有用户权限可以搭配vue-element-admin（非必须）点击详见文档
2. 或者自己写…也是很快的

vue-cli 创建时候，自动有vue-router

vue-router创建和方式详情见我另一个博客: 点击详见文档

//src/router/index.js 初始文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

创建路由守卫处理

新建src/permission.js 文件

import router from './router'
import store from './store' // vuex - 非项目必须
import { Message } from 'element-ui' // element-ui - 非项目必须
import NProgress from 'nprogress' // 进度条装饰 - 非项目必须
import 'nprogress/nprogress.css'// 进度条装饰样式 - 非项目必须

NProgress.configure({ showSpinner: false })// NProgress configuration

const whiteList = ['/login', '/register']// 白名单页面-不校验

// 路由跳转前 处理
router.beforeEach(async (to, from, next) => {
  NProgress.start() //进度条 - 开始 -- 如果没有使用进度条，此行注释

  // 操作说明：
  // NProgress.done() //进度条 - 关闭
  // next() //正常跳转不拦截
  // next({ path: '/xxx' }) //拦截跳转指定页面
  // await store.dispatch('LogOut') //vuex - active 调用 await必须配合async 
  // router.addRoutes(arr) // 动态添加可访问路由表
  // 注意一些操作后加 return 防止继续往下执行
  // next({ ...to, replace: true }) //hack方法 - 设置replace:true，这样导航将不会留下历史记录
})

// 路由跳转后 处理 -- 一般不处理，只关闭进度条
router.afterEach(() => {
  NProgress.done() // 如果没有使用进度条，此行注释
})

引用挂载

src/main.js

// ...
import '@/permission' // permission control
//或者：import './permission'

//在 new Vue({ el: '#app', router}) 之前

---

到此本文介绍基本完结。如果对 路由拦截不理解，可以接着看一个项目案例

// src/permission.js
import Vue from 'vue'
import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken, getUserInfo } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/login/mobile', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  document.title = getPageTitle(to.meta.title)
  const hasToken = getToken()
  const userInfo = getUserInfo()
  if (hasToken && userInfo && hasToken !== 'undefined' && userInfo !== 'undefined') {
    Vue.prototype.is_superior = getUserInfo.is_superior
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      store.dispatch('permission/generateRoutes', [])
      next()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})

活学活用，主要逻辑不变。在上文我介绍了，拦截的各种处理方式

---

有问题留言交流 ~~