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

  1. 定义用户角色和路由配置

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

  2. 创建路由守卫

使用 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');
});
相关推荐
慧一居士30 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖1 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1011 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js