vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇

在Vue 3 + TypeScript + Pinia + Element Plus项目中，我们可以使用动态路由和用户权限来实现不同角色的用户访问不同的页面。以下是一个简化的例子：

1. 定义路由和角色：

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAuth: true, roles: ['admin'] },
  },
  // 更多路由...
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
 
export default router;

2. 使用全局前置守卫来实现权限控制：

// router/routerGuard.ts
import router from './index';
import store from '@/store';
 
router.beforeEach(async (to, from, next) => {
  const user = store.state.user;
  if (to.matched.some(record => record.meta.requiresAuth) && !user.isLoggedIn) {
    // 如果用户未登录，则重定向到登录页面
    next('/login');
  } else if (to.matched.some(record => record.meta.roles)) {
    // 如果定义了角色，则检查用户角色是否匹配
    if (to.meta.roles.includes(user.role)) {
      next();
    } else {
      // 如果用户角色不匹配，则重定向到403页面
      next('/403');
    }
  } else {
    next(); // 如果没有定义权限要求，则允许访问
  }
});

3. 在Pinia中管理用户状态：

// store/user.ts
import { defineStore } from 'pinia';
 
export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    isLoggedIn: false,
    role: 'guest',
  }),
  actions: {
    login(role: string) {
      this.isLoggedIn = true;
      this.role = role;
    },
    logout() {
      this.isLoggedIn = false;
      this.role = 'guest';
    },
  },
});

4. 在登录组件中，登录成功后更新用户状态并重定向到主页：

// components/Login.vue
<script setup lang="ts">
import { useUserStore } from '@/store';
import { useRouter } from 'vue-router';
 
const userStore = useUserStore();
const router = useRouter();
 
function handleLogin(role: string) {
  userStore.login(role);
  router.push('/');
}
</script>

确保在应用的入口文件（如 main.ts）中正确地使用路由守卫：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { setupPinia } from './store';
 
const app = createApp(App);
 
setupPinia(app);
 
app.use(router);
app.mount('#app');

这样，你就有了一个基于Vue 3 + TypeScript + Pinia + Element Plus的项目，它使用动态路由和用户权限来控制页面访问。