Vue 权限守卫组件使用方法详解及扩展封装技巧

原创

小焱

发布于 2025-05-31 18:19:07

20500

代码可运行

文章被收录于专栏：前端开发前端开发

运行总次数：0

代码可运行

Vue权限守卫组件使用指南与扩展封装

一、组件功能概述

您提供的代码是一个Vue 3的权限守卫组件，它通过计算属性isAuthenticated判断用户是否已登录，并根据状态渲染不同内容：

已登录：渲染插槽内容
未登录：显示提示信息和登录按钮

这个组件本质是一个高阶组件(HOC)，用于保护需要认证的内容区域。

二、基础使用方法

（一）在模板中使用

<template>
  <div class="app">
    <AuthGuard>
      <!-- 这里的内容只有登录后才能看到 -->
      <Dashboard />
    </AuthGuard>
  </div>
</template>

<script setup>
import AuthGuard from '@/components/AuthGuard.vue';
import Dashboard from '@/views/Dashboard.vue';
</script>

（二）传递自定义属性

您可以通过作用域插槽自定义未登录状态下的显示内容：

<AuthGuard>
  <template #unauthenticated>
    <div class="custom-login-prompt">
      <p class="text-red-500">请先登录以访问此内容</p>
      <CustomLoginButton />
    </div>
  </template>
  
  <AuthenticatedContent />
</AuthGuard>

三、组件封装扩展

（一）扩展权限控制功能

您可以通过添加props支持基于角色的权限控制：

<!-- components/AuthGuard.vue -->
<template>
  <div v-if="hasAccess">
    <slot />
  </div>
  <div v-else>
    <p v-if="!isAuthenticated">请先登录</p>
    <p v-else>您没有权限访问此内容</p>
    <button @click="redirectToLogin">登录</button>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';

const props = defineProps({
  roles: {
    type: Array,
    default: () => [], // 允许的角色列表
  },
  redirect: {
    type: String,
    default: 'Login', // 未登录时的重定向路由名
  },
});

const authStore = useAuthStore();
const router = useRouter();

const isAuthenticated = computed(() => authStore.isAuthenticated);

// 计算是否有权限访问
const hasAccess = computed(() => {
  if (!isAuthenticated.value) return false;
  if (props.roles.length === 0) return true; // 没有角色限制
  
  // 检查用户角色是否在允许的列表中
  return props.roles.includes(authStore.user?.role);
});

const redirectToLogin = () => {
  router.push({ name: props.redirect });
};
</script>

（二）添加动画过渡效果

为权限切换添加平滑过渡：

<template>
  <transition name="fade">
    <div v-if="hasAccess">
      <slot />
    </div>
    <div v-else>
      <p v-if="!isAuthenticated">请先登录</p>
      <p v-else>您没有权限访问此内容</p>
      <button @click="redirectToLogin">登录</button>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

四、高级使用场景

（一）基于角色的权限控制

<AuthGuard roles="['admin', 'editor']">
  <!-- 只有管理员和编辑可以看到 -->
  <AdminPanel />
</AuthGuard>

<AuthGuard roles="['user']">
  <!-- 普通用户可以看到 -->
  <UserDashboard />
</AuthGuard>

（二）在路由级别使用

虽然该组件主要用于模板，但也可以在路由级别结合使用：

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AdminView from '../views/AdminView.vue';
import { useAuthStore } from '@/stores/auth';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView,
  },
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('../views/AdminView.vue'),
    meta: { requiresAuth: true, roles: ['admin'] },
  },
];

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

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore();
  
  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    next({ name: 'Login' });
  } else if (to.meta.roles && !to.meta.roles.includes(authStore.user?.role)) {
    // 使用AuthGuard组件处理无权限情况
    next({ name: 'Forbidden' });
  } else {
    next();
  }
});

export default router;

五、与Pinia状态管理结合

确保您的Auth Store提供必要的状态和方法：

// stores/auth.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useAuthStore = defineStore('auth', () => {
  const user = ref(null);
  const token = ref(localStorage.getItem('token') || null);
  
  const isAuthenticated = computed(() => !!token.value);
  
  const login = async (credentials) => {
    // 登录逻辑...
    token.value = 'your_token_here';
    localStorage.setItem('token', token.value);
  };
  
  const logout = () => {
    token.value = null;
    user.value = null;
    localStorage.removeItem('token');
  };
  
  return {
    user,
    token,
    isAuthenticated,
    login,
    logout,
  };
});