vue3项目，管控部分路由仅管理员可见

此白非彼白`2024-07-17 12:31

定义用户角色和路由配置

假设用户信息（包括isAdmin）存储在Vuex状态管理中或某个全局状态中。

创建路由守卫

使用 Vue Router 的全局前置守卫来检查用户的角色，并决定是否允许他们访问特定路由。

步骤1：配置 Vue Router 路由

javascript 复制代码

// router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Admin from '../views/Admin.vue';
import store from '../store'; // 假设你使用 Vuex 来管理用户状态

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/admin',
    name: 'Admin',
    component: Admin,
    meta: { requiresAdmin: true }
  },
  // 其他路由
];

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

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAdmin)) {
    // 检查用户是否为管理员
    if (store.state.user.isAdmin) {
      next();
    } else {
      next({ name: 'Home' }); // 或者重定向到一个错误页面
    }
  } else {
    next(); // 确保总是调用 next() 方法
  }
});

export default router;

步骤2：在 Vuex 中存储用户信息

javascript 复制代码

// store/index.js

import { createStore } from 'vuex';

export default createStore({
  state: {
    user: {
      isAdmin: false // 默认值，根据实际情况初始化
    }
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    // 定义一些 actions 来获取和设置用户信息
    fetchUser({ commit }) {
      // 假设从服务器获取用户信息
      const user = {
        isAdmin: true // 根据实际情况获取
      };
      commit('setUser', user);
    }
  },
  modules: {}
});

步骤3：在应用启动时获取用户信息

javascript 复制代码

// main.js

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

const app = createApp(App);

app.use(store);
app.use(router);

// 在应用启动时获取用户信息
store.dispatch('fetchUser').then(() => {
  app.mount('#app');
});