Vue3+TS实现动态路由权限的示例详解

import { router } from './index';
import store from '../store';

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const hasToken = store.getters['auth/hasToken'];
    if (!hasToken) {
      // 跳转到登录页
      next('/login');
      return;
    }

    const requiredRoles = to.meta.roles;
    const userRole = store.getters['user/role'];
    if (!requiredRoles.includes(userRole)) {
      // 显示无权访问提示
      next('/403');
      return;
    }
  }

  next();
});

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      requiresAuth: true,
      roles: ['admin', 'editor'],
    },
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue'),
    meta: {
      requiresAuth: true,
      roles: ['admin'],
    },
  },
  // ...
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
});

import { Module } from 'vuex';
import { RootState } from '../index';

interface UserState {
  id: number;
  role: string;
}

const userModule: Module<UserState, RootState> = {
  namespaced: true,
  state: {
    id: 0,
    role: '',
  },
  getters: {
    role(state): string {
      return state.role;
    },
  },
  mutations: {
    setId(state, id: number) {
      state.id = id;
    },
    setRole(state, role: string) {
      state.role = role;
    },
  },
  actions: {
    async fetchUser({ commit }) {
      // 调用后端API获取当前用户的角色信息
      const response = await fetch('/api/user');
      const data = await response.json();

      commit('setId', data.id);
      commit('setRole', data.role);
    },
  },
};

export default userModule;

export type { UserState };

import { router } from './index';
import store from '../store';

router.beforeEach(async (to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const hasToken = store.getters['auth/hasToken'];
    if (!hasToken) {
      // 跳转到登录页
      next('/login');
      return;
    }

    const requiredRoles = to.meta.roles;
    const userRole = store.getters['user/role'];

    if (!userRole) {
      // 获取当前用户的角色信息
      await store.dispatch('user/fetchUser');
    }

    if (!requiredRoles.includes(userRole)) {
      // 显示无权访问提示
      next('/403');
      return;
    }
  }

  next();
});