目前實現(xiàn)的效果:
1.刷新 和 跳轉任何頁面都會跳到登錄頁面
2.路由攔截屏蔽后,刷新頁面vuex里的數(shù)據(jù)都消失了

問題:
1.設置路由攔截后,實現(xiàn)了不登錄全跳轉至登錄頁面,但是刷新也都跳轉到登錄頁面
2.路由攔截屏蔽后,刷新頁面vuex里的數(shù)據(jù)都消失了,知道可以存在localStorage,但是具體的怎么實現(xiàn)呢?
3.用戶數(shù)據(jù)少可以存在localStorage里,但是主頁的所有數(shù)據(jù)就不少了,難道也存在里面嗎?
4.可不可以讓刷新頁面和路由攔截結合起來,刷新頁面再請求用戶數(shù)據(jù)和當前頁面的數(shù)據(jù),具體怎么實現(xiàn)?

最終實現(xiàn)結果:刷新后依然保持在當前頁面,并且數(shù)據(jù)不消失

代碼:
index

import Vue from 'vue';
import Vuex from 'vuex';

import getters from './getters';
import actions from './actions';
import mutations from './mutations';

Vue.use(Vuex);

const state = {
  token: '',
  isLogin: false, // 用戶是否登錄
  userInfo: {  // 用戶信息
    id: '',       // 用戶id
    name: '',     // 用戶名字
    deptId: '',   //
    realName: '', // 用戶真實名字
    avatar: '',   // 用戶頭像
    roles: '',    // 用戶權限
  }
};

const store =  new Vuex.Store({
  state,
  getters,
  actions,
  mutations
});
export default store;

mutations

export const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_ISLOGIN: (state, isLogin) => {
    state.isLogin = isLogin
  },
  SET_ID: (state, id) => {
    state.userInfo.id = id
  },
  SET_NAME: (state, name) => {
    state.userInfo.name = name
  },
  SET_DEPTID: (state, deptId) => {
    state.userInfo.deptId = deptId
  },
  SET_REALNAME: (state, realName) => {
    state.userInfo.realName = realName
  },
  SET_AVATAR: (state, avatar) => {
    state.userInfo.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.userInfo.roles = roles
  },
};
export default mutations;

actions

import { login, logout, getUserInfo } from '@/api/api'
export const actions = {
  // 登錄
  Login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        let token = response.data.token;
        localStorage.setItem('token', token);
        commit('SET_TOKEN', token);
        commit('SET_ISLOGIN', true);
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 獲取用戶信息
  GetUserInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getUserInfo(state.token).then(response => {
        if (!response.data) {
          reject('error')
        }
        let data = response.data;
        console.log(response.data);
        commit('SET_ID', data.Id);
        commit('SET_NAME', data.Name);
        commit('SET_DEPTID', data.DeptId);
        commit('SET_REALNAME', data.RealName);
        commit('SET_AVATAR', data.Face);
        commit('SET_ROLES', data.Roles);
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 登出
  LogOut({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        commit('SET_TOKEN', '');
        commit('SET_ISLOGIN', false);
        localStorage.removeItem('token');
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
};
export default actions;

main.js

import Vue from 'vue';
import iView from 'iview';
import App from './App';
import 'iview/dist/styles/iview.css';
import router from './router';
import store from './store';

import { getUserInfo } from '@/api/api'

Vue.config.productionTip = false
Vue.use(iView);

// 路由攔截
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (!store.state.isLogin && to.path !== '/login') {
      next({
        path: '/login',
      })
    } else {
      next();
    }
  }
  else {
    next();
  }
});

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
});

求大神幫忙!!!