vue路由拦截之响应拦截使用

/* 
* 新建配置响应拦截文件
* 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')