vue2.x项目从0到1（六）之权限校验文件

一般的权限校验文件都会放在 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！

vue2.x项目从0到1（六）之权限校验文件

猜你喜欢