记一次登录和路由权限判断解决方案

axios配置

Axios.interceptors.response.use(response => {
  if(response.data.code === '403' || response.data.code === '401'){
    store.commit("loginOUT");
    return response

; } if(response.status === 200){ return response; }else{ Message.warning(response.data.msg) } },error => { return Promise.reject(error); });

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from './../router'
import {getCookie,setCookie} from '../config'
import {MessageBox} from 'element-ui'

axios.interceptors.request.use(config => {
  if(getCookie('token')){
    config.headers.token = getCookie('token');
  }
  return config;
},error => {
  return Promise.reject(error);
});

let authRouters = [];

function dealRoute(routers){
  routers.forEach((router,index,rs) => {
    if(router.childs_sc && router.childs_sc.length){
      dealRoute(router.childs_sc)
    }else{
      let authRoute = {
        path:router.dataUrl,name:router.dataUrl,component:resolve => require(['@/pages/' + router.dataUrl],resolve)
      };
      authRouters.push(authRoute);
    }
  });
}

function clearCookie(name){
  setCookie(name,"");
}

Vue.use(Vuex);
export const store = new Vuex.Store({
  state:{
    requireAuth:false,authRoutes:[]
  },mutations:{
    loginIN(state){
      state.requireAuth = true;
      localStorage.setItem('requireAuth',true)
    },loginOUT(state){
      clearCookie('token');
      localStorage.removeItem('requireAuth');
      localStorage.removeItem('realName');
      router.push('/login');
      state.requireAuth = false;
    },setAuthRoutes(state,authRoutes){
      state.authRoutes = authRoutes;
      dealRoute(state.authRoutes);
      router.options.routes[2].children.unshift(...authRouters);
      router.addRoutes(router.options.routes);
    }
  },actions:{
    getUserMenu({commit}){
      axios.get(process.env.API_HOST[0] + '/menu/userMenu',{
        timeout:8000,responseType:"json",headers:{
          "Content-Type":"application/json; charset=UTF-8"
        },withCredentials:true
      }).then(res => {
        if(res.status === 200 && res.data.success === true){
          commit('setAuthRoutes',res.data.list_sc);
        }else{
          MessageBox.alert(res.data.msg,'提示',{
            confirmButtonText:'确定',callback:action => {
              commit("loginOUT")
            }
          });
        }
      });
    }
  }
});

router/index.js

export default new Router({
  routes:[{
    path:'/',redirect:'/home'
  },{
    path:'/login',name:'login',component:resolve => require(['@/pages/login'],resolve)
  },{
    path:'/home',component:LeftNav,children:[]
  },{path:'*',component:NotFound}]
})

main.js

if(localStorage.getItem('requireAuth')){
  store.commit('loginIN');
}
router.beforeEach((to,from,next) => {
  if(to.fullPath === '/' || (store.state.requireAuth || localStorage.getItem('requireAuth'))){
    next();
  }else{
    if(!to.fullPath.includes("/login")){
      next({
        path:'/login',query:{redirect:to.fullPath}
      })
    }
    next()
  }
});

App.vue

export default {
  name:'App',created(){
    if(this.$store.state.requireAuth || localStorage.getItem("requireAuth")){
      this.$store.dispatch('getUserMenu')
    }
  }
}

login.vue

  登录成功   setCookie('token',res.data.token);this.$store.commit("loginIN");
            this.$router.push(this.$route.query.redirect || "/")        

leftNav.vue

created(){
  if(!this.authRoutes.length){
    this.$store.dispatch('getUserMenu')
  }
}