/*
* 新建配置响应拦截文件
* routerGuard.js
*/
// 设置路由拦截
// 引入路由页面
import router from "./index"
// 本地存储的getItem方法
import {GET,SET} from "../appLocation/localManager"
// 登录的api接口
import {userInfo} from "../network/requestData"
// 路由守卫
router.beforeEach((to,from,next)=>{
// 获取token信息
const token = GET("token")
// 如果不存在 并且要访问出登录页外其他页面
if(!token){
if(to.path !== "/login"){
// next重定向
next({path:"/login"})
}else{
// 如果不是login以外的其他页面就直接导航
next()
}
// 如果存在token信息
} else{
// 如果要去登录页面就直接进入
if(to.path == "/login"){
next()
// 如果有token但是不是去登录页
}else{
// 查看是否存在用户信息
const info = GET("userInfo")
// 存在就通过导航
if(info){
next()
}else{
// 不存在就通过token获取信息
userInfo(token).then(res=>{
console.log(res);
let user = res.data
// 获取到保存并通过导航
if(user.flag){
SET("userInfo",user.data)
next()
// 否则去重新登录
}else{
next("/login")
}
}).catch(error=>{
console.log(error);
})
}
}
}
})
全局引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
// 全局引入
import "./router/routerGuard"
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')