基于External API的前端项目如何管理页面访问权限？

1. 权限信息的安全存储 #

• 登录后拿到的权限列表，和Bearer Token一起存在sessionStorage里（如果需要跨页面持久化，用localStorage，但要注意XSS风险，建议加一层简单加密，比如Base64转码）
• 别存在内存变量里，页面刷新后会直接丢失，必须存在本地存储

2. 路由层面的权限拦截 #

• 先给前端路由配置加权限标识，和API返回的权限key对应上：

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiredPermission: 'dashboard_access' }
  },
  {
    path: '/settings',
    component: () => import('@/views/Settings.vue'),
    meta: { requiredPermission: 'settings_access' }
  }
]

• 配置全局路由守卫，每次跳转前做校验：
  • 从本地存储取出权限列表
  • 检查当前路由的requiredPermission是否存在，且对应权限值为true
  • 没权限直接跳403页面或首页；未登录的话跳登录页

3. 组件内部的权限控制 #

• 先封装一个简单的权限判断工具函数：

// utils/permission.js
export const checkPermission = (permissionKey) => {
  const userPermissions = JSON.parse(sessionStorage.getItem('userPermissions')) || {}
  return userPermissions[permissionKey] === true
}

• 在组件里用这个函数控制按钮、菜单、模块的显示隐藏：

<!-- Vue组件示例 -->
<template>
  <div>
    <button v-if="checkPermission('edit_user')">编辑用户</button>
    <div v-if="checkPermission('view_report')">报表模块</div>
  </div>
</template>

<script setup>
import { checkPermission } from '@/utils/permission'
</script>

// React组件示例
import { checkPermission } from '@/utils/permission'

const UserPage = () => {
  return (
    <div>
      {checkPermission('edit_user') && <button>编辑用户</button>}
      {checkPermission('view_report') && <div>报表模块</div>}
    </div>
  )
}

4. API请求的前置校验（可选但建议） #

• 虽然后端API本身会做权限校验，但前端可以提前拦截无权限的请求，减少无效请求：
• 在请求拦截器里（比如axios的interceptors.request.use），判断当前请求对应的权限是否存在，不存在直接取消请求并提示用户无权限

5. 权限更新的处理 #

• 如果用户权限在会话中被修改（比如管理员调整了权限），前端要调用API刷新权限列表，更新本地存储后，要么刷新页面，要么重新渲染路由和组件

关键提醒 #

• 前端权限控制只是辅助拦截，核心权限校验必须由后端API完成，别指望前端能完全防住恶意用户（人家可以改本地存储绕过）
• 存储权限列表时，和Token一起做简单加密，至少能防止普通用户随便改权限值

内容的提问来源于stack exchange，提问作者Ameera Test