使用 Vuex.Store 时我做错了什么？

Question

我想利用“Vuex Store”功能在整个项目中存储和使用“isAuthenticated”变量，据此，授予对路由的访问权限。我的错误是什么？我花了很多时间，审查了一堆将 vue 商店嵌入到项目中的不同方法，但没有任何结果。

我来自“商店”的“index.js”：

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        isAuth: false,
    },
    mutations: {
        setAuthStatus(state, status) {
            state.isAuth = status;
        },
    },
});
export default store;

我的“main.js”来自“root(src)”：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
    render: (h) => h(App),
    store,
    router,
    vuetify,
}).$mount('#app');

浏览器错误：

Answer 1

比方说，您显示的代码中存在大量漏洞（或者您没有包含它们）。首先，isAuth 只是一个布尔值 (true/false)。您必须在某处使用它才能使其正常工作（即，在 router.js 文件中以防止根据条件导航到某些路线）。

下面是用户身份验证和角色的简单实现。我承认，它比你的例子复杂一点，但我想你会明白的。

路由器

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import store from "../store";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/admin",
    name: "Admin",
    component: () => import("../views/Admin.vue"),
    children: [],
    meta: { role: "admin", requiresAuth: true },
  },
  {
    path: "/manager",
    name: "Manager",
    component: () => import("../views/Manager.vue"),
    children: [
      {
        path: "/employees",
        name: "Employees",
        component: () => import("../views/children/manager/Employees.vue"),
      },
    ],
    meta: { role: "manager", requiresAuth: true },
  },
  {
    path: "/employee",
    name: "Employee",
    component: () => import("../views/Employee.vue"),
    children: [],
    meta: { role: "employee", requiresAuth: true },
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue"),
    meta: { requiresAuth: false },
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
    meta: { requiresAuth: false },
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
    return { path: "login" };
  } else if (to.meta.role && to.meta.role !== store.getters.userRole) {
    return { path: store.getters.userRole };
  }
});

export default router;

这里有两项是关键。某些路由上的 meta 属性和在每个路由更改上运行的 beforeEach 方法。

meta 属性只是告诉路由器，“嗨，这些是我的条件，你必须满足它们才能进入”（我们在 beforeEach 方法中通过检查强制执行） .

商店

import { createStore } from "vuex";
import { User } from "../types";

export default createStore({
  state: {
    user: <User>{},
  },
  getters: {
    isLoggedIn: (state): boolean => !!Object.keys(state.user).length,
    userRole: (state): string => state.user.role,
  },
  mutations: {
    SET_USER(state, user): void {
      state.user = { ...user };
    },
  },
  actions: {},
  modules: {},
});

我们正在将其导出到 router.js 文件，该文件使用 getters 作为 beforeEach 方法。

应用程序

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

主文件中不应包含任何特殊内容。

版本

Vuex 4.0 与 Vue3 兼容，因此请确保您使用的是 Vue3（根据您的语法，它看起来不像）。

使用 Vuex.Store 时我做错了什么？

What am I doing wrong when using Vuex.Store?

javascript

vue.js

vue-component

vuex

vue-router

路由器

商店

应用程序

版本