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');
});
相关推荐
摸鱼的春哥4 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel8 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常9 小时前
我学习到的Vue2.6的prop修饰符
vue.js