Vue3 页面权限控制实战示例（路由守卫 + 权限判断）

这里做一套开箱即用、最简单、最实用 的 Vue3 权限控制方案，只针对个别页面做权限校验，满足条件才能访问，不满足直接跳转到登录/无权限页。

核心思路

在**路由元信息（meta）**里标记需要权限的页面
使用全局路由守卫监听页面跳转
判断用户权限 + 页面是否需要权限 → 决定是否放行

完整实现步骤

1. 路由配置（关键：给页面加权限标记）

router/index.js

javascript 复制代码

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

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    meta: { requiresAuth: false } // 不需要权限
  },
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresAuth: false }
  },
  {
    path: '/admin',
    component: () => import('@/views/Admin.vue'),
    // ✅ 这个页面需要权限！
    meta: { requiresAuth: true, role: 'admin' } 
  },
  {
    path: '/user-center',
    component: () => import('@/views/UserCenter.vue'),
    // ✅ 这个页面也需要权限！
    meta: { requiresAuth: true } 
  },
  {
    path: '/403',
    component: () => import('@/views/403.vue')
  }
]

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

export default router

2. 全局路由守卫（权限判断核心）

router/index.js 继续追加：

javascript 复制代码

// 模拟：从登录接口/状态管理拿到用户信息
const getCurrentUser = () => {
  return {
    isLogin: true, // 用户是否登录
    role: 'admin'  // 用户角色：admin / user / guest
  }
}

// 全局路由守卫
router.beforeEach((to, from, next) => {
  const user = getCurrentUser()
  // 判断目标页面是否需要权限
  const needAuth = to.meta.requiresAuth

  // 1. 不需要权限 → 直接放行
  if (!needAuth) {
    return next()
  }

  // 2. 需要权限，但用户未登录 → 跳登录
  if (!user.isLogin) {
    return next('/login')
  }

  // 3. 需要指定角色（比如只有管理员能进）
  if (to.meta.role && user.role !== to.meta.role) {
    return next('/403') // 无权限页
  }

  // 4. 权限满足 → 放行
  next()
})

3. 状态管理版（真实项目用法）

如果你用 Pinia 存储用户权限，把 getCurrentUser 换成：

javascript 复制代码

import { useUserStore } from '@/stores/user'

router.beforeEach((to, from, next) => {
  const userStore = useUserStore() // Pinia 用户仓库

  if (to.meta.requiresAuth && !userStore.isLogin) {
    next('/login')
  } 
  else if (to.meta.role && userStore.role !== to.meta.role) {
    next('/403')
  } 
  else {
    next()
  }
})

3 种常用权限场景（直接复制用）

场景1：只要登录就能访问

javascript 复制代码

{
  path: '/user-center',
  component: () => import('@/views/UserCenter.vue'),
  meta: { requiresAuth: true }
}

场景2：必须是管理员才能访问（个别页面）

javascript 复制代码

{
  path: '/admin',
  component: () => import('@/views/Admin.vue'),
  meta: { requiresAuth: true, role: 'admin' }
}

场景3：必须拥有某个权限码才能访问

javascript 复制代码

{
  path: '/order-manage',
  component: () => import('@/views/OrderManage.vue'),
  meta: { requiresAuth: true, permission: 'order:view' }
}

守卫里判断：

javascript 复制代码

if (to.meta.permission && !user.permissions.includes(to.meta.permission)) {
  next('/403')
}

403 无权限页面示例

views/403.vue

vue 复制代码

<template>
  <div class="flex-center">
    <h1>⚠️ 无权限访问</h1>
    <p>你没有权限查看该页面</p>
    <button @click="$router.push('/')">返回首页</button>
  </div>
</template>

<script setup>
</script>

总结

给需要权限的页面 配置 meta: { requiresAuth: true }
全局路由守卫统一校验权限
支持：登录校验、角色校验、权限码校验
只控制个别页面，不影响其他页面，非常轻量

这套方案是企业最常用的轻量权限方案，你直接复制到项目里就能跑起来。