常用在vue项目中使用vue-router进行路由管理,也会做一些权限以及路由守卫拦截。
vue-cli 创建时候,自动有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()
})
活学活用,主要逻辑不变。在上文我介绍了,拦截的各种处理方式
有问题留言交流 ~~