如何在Vue Router文件中访问Vuex store实现路由权限守卫

你遇到的报错是循环依赖导致的：main.js中引入了router模块，而router模块又反过来引入main.js导出的store，模块加载过程中main.js还没完成导出执行，所以router里拿到的store自然是undefined。

解决步骤 #

步骤1：把store逻辑从main.js中拆分到独立文件 #

在src目录下新建store/index.js文件，把main.js里除了创建应用、挂载相关的所有store代码全部挪进去：

// src/store/index.js
import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import Cookies from 'js-cookie';
import API from '../API';

const store = createStore({
  state: {
    posts: null,
    loading: null,
    error: null,

    user: {},
    token: null,
    userLoading: null,
    userError: null,

    registerLoading: null,
    registerError: null,

    logOutErorr: null,
  },
  plugins: [
    createPersistedState({
      key: 'BLOG_MEVN',
      paths: ['user', 'token'],
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) =>
          Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key),
      },
    }),
  ],

  getters: {
    isLoggedIn: state => !!state.token,
  },

  mutations: {
    SET_POSTS_LIST(state, payload) {
      state.posts = payload;
    },
    SET_POSTS_STATUS_LOADING(state, payload) {
      state.loading = payload;
    },
    SET_POSTS_LIST_STATUS_FAIL(state, payload) {
      state.error = payload;
    },

    SET_USER(state, payload) {
      state.user = payload;
      state.token = payload.token;
    },
    SET_USER_LOADING(state, payload) {
      state.userLoading = payload;
    },
    SET_USER_STATUS_FAIL(state, payload) {
      state.userError = payload;
    },

    USER_LOGOUT(state, payload) {
      state.user = payload;
      state.token = null;
    },
    USER_LOGOUT_FAIL(state, payload) {
      state.logOutErorr = payload;
    },

    USER_REGISTER(state, payload) {
      state.user = payload;
      state.token = payload.token;
    },
    USER_REGISTER_FAIL(state, payload) {
      state.registerError = payload;
    },
    USER_REGISTER_LOADING(state, payload) {
      state.registerLoading = payload;
    },
  },
  actions: {
    async getPosts({ commit }) {
      commit('SET_POSTS_STATUS_LOADING', true);
      commit('SET_POSTS_LIST', []);
      try {
        const { data } = await API.get('/api/v1/posts');
        commit('SET_POSTS_LIST', data);
        commit('SET_POSTS_STATUS_LOADING', false);
      } catch (error) {
        commit('SET_POSTS_STATUS_LOADING', false);

        commit(
          'SET_POSTS_LIST_STATUS_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },

    async login({ commit }, User) {
      commit('SET_USER_LOADING', true);
      commit('SET_USER', []);
      try {
        const config = {
          headers: {
            'Content-Type': 'application/json',
          },
        };

        const { data } = await API.post(`/api/v1/users/login`, User, config);
        commit('SET_USER', data);
        commit('SET_USER_LOADING', false);
      } catch (error) {
        commit('SET_USER_LOADING', false);

        commit(
          'SET_USER_STATUS_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },

    async register({ commit }, User) {
      commit('USER_REGISTER_LOADING', true);
      commit('USER_REGISTER', []);
      try {
        const config = {
          headers: {
            'Content-Type': 'application/json',
          },
        };

        const { data } = await API.post(`/api/v1/users/signup`, User, config);
        commit('USER_REGISTER', data);
        commit('USER_REGISTER_LOADING', false);
      } catch (error) {
        commit('USER_REGISTER_LOADING', false);

        commit(
          'USER_REGISTER_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },

    async logout({ commit }) {
      try {
        await API.get(`/api/v1/users/logout`);
        commit('USER_LOGOUT', {});
      } catch (error) {
        commit(
          'USER_LOGOUT_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },
  },
});

export default store;

步骤2：修改main.js，只保留应用初始化逻辑 #

清理后的main.js代码如下：

import { createApp } from 'vue';
import router from './router';
import store from './store'; // 引入独立的store
import './bootstrap.min.css';
import App from './App.vue';

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

步骤3：修改router文件的store引入路径 #

把原来的import store from '../main'改成引入独立的store：

// router文件头部修改引入路径
import store from '../store';

改完后你注释掉的beforeEach路由守卫就可以正常启用，直接调用store.getters.isLoggedIn就能拿到正确的登录状态。

内容的提问来源于stack exchange，提问作者valkkorn