一、前言
项目根目录中的 permission.js 存放的是路由拦截代码,同时在 main.js 中全局引入 import ‘@/permission’ ;每次页面跳转前都能有效拦截,根据自己的业务有所作为;
不得不说这个 permission.js 取名不是很贴切 路由拦截就路由拦截,取名为permission 授权许可,可能就是为了体现角色权限动态页面路由加载吧;
在每次路由的时候检测路由白名单、Token是否存在就可以了,没必要再去检测用户基础信息 多余操作,当然根据实际需求而定;
关键是这块的代码写的很烂,if else 各种嵌套;
二、改造优化
1、Permission.js 更名为 Guard.js
2、从项目根目录 移动到:/router 文件夹随路由走
3、main.js 添加全局引用: import ‘@/router/Guard’
4、Guard.js 代码优化调整:
import router from './index'
import NProgress from 'nprogress' // 顶部加载条 用于页面切换
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
// 1、顶部加载条配置
NProgress.configure({ showSpinner: false })
// 2、白名单设置:无需登录验证
const whiteList = ['/login']
// 3、路由拦截
router.beforeEach(async(to, from, next) => {
// 3.1、开启顶部加载条
NProgress.start()
// 3.2、设置页面标题
document.title = getPageTitle(to.meta.title)
// 3.3、白名单检测:白名单页面直接跳转
if (whiteList.indexOf(to.path) !== -1) { // path是基础路径 fullpath带参数
next()// 直接跳转
NProgress.done()
return
}
// 3.4、检测当前是否登录:未登录直接跳转登录界面
const tmpHasToken = getToken()
if (!tmpHasToken) {
next(`/login?redirect=${to.path}`) // 跳转登录界面
NProgress.done()
return
}
// 3.5、不在白名单 但是已经登录:跳转指定页面
next()
})
// 4、每次路由结束 调用一次结束顶部状态进度Process bar
router.afterEach(() => {
NProgress.done()
})
5、白名单配置模式更改:针对页面比较多比较复杂的情况好用
在router/index.js 中 对页面路径配置进行改造:增加是否需要登录配置
{
path: '/test',
component: Layout,
children: [
{
path: 'index',
name: 'test',
component: () => import('@/views/test/index'),
meta: { title: '测试页面', icon: 'form' },
isneedlogin:true //增加是否需要登录配置
}
]
},
然后在router/guard.js 修改代码:
//if (whiteList.indexOf(to.path) !== -1) { 屏蔽掉原来的判断
if(!to.isneedlogin){ //采用新的判断
next()// 直接跳转
NProgress.done()
return
}
三、总结
有一个完全可控简洁优雅的路由拦截 感觉很舒服;