本文主要参考:Vue--系统权限拦截 - 邹邹很busy。 - 博客园
用于实现未登录页面(没有token or token过期)的路由拦截。后端用flask实现。
项目结构:
main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App.vue'
import 'element-ui/lib/theme-chalk/index.css'
import axios from "axios";
import store from "./store/store";
import router from "./router";
// 权限拦截,全局的
import './premission'
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
store,
router,
render: h => h(App),
}).$mount('#app')
premission.js
// 权限校验,要在main.js文件里导入才会有效
/*
Vue Router中的前置钩子函数beforeEach(to, from, next)
当进行路由跳转之前,进行判断是否已经登录过,登录过则允许访问非登录页面,否则,回到登录页面
to:即将要进入的目标路由对象
from:即将要离开的路由对象
next:是一个方法,可以指定路由地址,进行路由跳转
*/
import router from './router' // 所有的路由跳转都是在这个里面的
// 获取校验token的接口,自己实现
import { GetUserInfo} from "@/api/login"; // 导入获取用户信息的方法
router.beforeEach((to, from, next)=>{
// 获取token
const token = localStorage.getItem('userToken')
if(!token){
// 如果没有获取到,要访问非登录页面,则不让访问,回到登录页面 /login
if(to.path === '/login'){
next() // 等价于 next({path: '/login'}),会自动获取到上面的路由
}else if(to.path === '/register'){// 注册页面
//
next({path: '/register'})
}else{
// 请求登录页面
next({path: '/login'})
}
}else{
// 获取到token,
// 请求路由是/login,则去目标路由
if(to.path === '/login'){
next()
// 请求路由是/register,则去register
}else if(to.path === '/register'){
next()
}
else{ //如果有token则验证token是否过期,如过期,还是回到login页面
GetUserInfo().then((response) => {
// console.log(response);
const res = response.status;
if (res===200) {
next()
} else {
next({path: '/login'})
}
});
}
}
})