一般的权限校验文件都会放在 src 下 utils 下的文件夹里 我命名的叫 permission.js, 名字可以改 随便起什么 + .js 就行,但是企业级项目起名字要让别人也看懂哦 不然会挨骂的!
1. 首先创建了 permission.js(下方统称为权限校验文件) 文件之后,
2. 其次我们要全局引入
在main.js文件里引入
import "@/utils/permission.js"
3. 编写权限校验文件的代码
import router from '@/router'
import store from '@/store'
import { Message } from 'element-ui'
let whiteList = ["/userLogin"] // 白名单 在这个名单里的路由 没有token 可以进入
// 路由跳转之前
router.beforeEach((to, from, next) => {
let path = from.path // 记录是从哪个路由跳转来的
// 如果之前有页面跳转到登录 则记录该页面路由到vuex中
if (path){
store.commit('SET_JUMPROUTER', path)
} else { // 否则跳转到用户页
store.commit('SET_JUMPROUTER', "/")
}
// 获取token
let token = localStorage.getItem("token")
let isJump = false // 判断是否跳转
// 修改项目名称
if (to.meta.title) {
document.title = to.meta.title
}
// 判断token 有就跳转
if (token) {
// 如果有token 则跳回到 跳转来时的页面
next()
} else {
// 判断白名单中是否有值 否则forEach会报错
if (whiteList.length) {
whiteList.forEach((item) => {
if (to.path == item) {
// 如果路由在白名单里 直接跳转
isJump = true // 如果跳转 则变为true
next() // 没有next函数 将不会跳转到新路由
}
})
if (!isJump) {
// 没有token又不在白名单当中则跳转到登陆页
Message.error('身份过期!')
next("/userLogin")
}
} else {
// 没有token白名单中没值当中则跳转到登陆页
Message.error('身份过期!')
next("/userLogin")
}
}
})
如果大家用我的这块权限校验文件的话 还需要在vuex(src下store文件夹下index.js)里添加 不同项目 可能位置不同 写法可能有些许变化
然后登录页 登录接口这个地方 修改成 从哪里跳转过来的 登录之后 就跳转到哪里去 如果没有 就默认跳转到首页
是不是很EZ!