bun + vite7 的结合，孕育的 Robot Admin 【靓仔出道】（八）

兮漫天
61 阅读3分钟

Robot Admin 认证与授权系统完整指南

概述

本指南介绍了Robot Admin中的身份验证和授权系统。您将了解用户身份验证、路由保护和权限管理如何协同工作，以确保您的应用程序安全。

Robot Admin平台实现了一个全面的基于令牌的身份验证系统。理解此流程对于开发安全功能和调试身份验证问题至关重要。

身份验证系统

令牌管理

身份验证依赖于存储在应用程序状态和本地存储中的JWT令牌。用户存储处理令牌操作：

// 令牌存储和检索
setToken(token: string) {
  this.token = token
  setItem(TOKEN, token)
}

当用户成功登录时，系统：

  1. 将令牌存储在Pinia状态和本地存储中
  2. 记录当前时间戳以跟踪令牌过期
  3. 重定向到主页

令牌过期机制

系统包括一个令牌超时机制，防止使用过期令牌：

export const d_isCheckTimeout = (): boolean => {
  const currentTime = Date.now()
  const timeStamp = d_getTimeStamp()
  return currentTime - timeStamp > TOKEN_TIMEOUT_VALUE
}

此检查在每个API请求之前执行，以确保令牌仍然有效。如果过期，用户将自动登出。

API身份验证

所有API请求都通过Axios拦截器系统包含身份验证令牌：

service.interceptors.request.use(
  config => {
    const { token, logout } = s_userStore()
    if (token) {
      if (d_isCheckTimeout()) {
        logout()
        return Promise.reject(new Error('token 已过期, 请重新登录'))
      }
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)

拦截器还处理身份验证错误（401响应），通过登出用户并显示适当的错误消息。

授权系统

Robot Admin中的授权决定了用户在身份验证后可以访问哪些资源。这是通过基于用户权限的动态路由生成实现的。

权限管理

权限存储（s_permissionStore）管理授权菜单和按钮权限：

export const s_permissionStore = defineStore('permission', {
  state: () => {
    return {
      authButtonList: {},
      authMenuList: [] as DynamicRoute[],
    }
  },
  // ...
})

当用户登录时，系统从后端API获取其权限并存储，以供授权决策。

动态路由生成

核心功能之一是基于用户权限的动态路由生成：

当权限加载时，initDynamicRouter函数：

  1. 从后端获取授权菜单数据
  2. 处理路由数据以标准化路径和组件
  3. 根据路由定义动态解析Vue组件
  4. 使用Vue Router注册这些路由

路由保护

导航守卫确保用户只能访问其被授权的路由：

router.beforeEach(
  async (to: RouteLocationNormalized): Promise<string | boolean> => {
    // ...
    // 1. 重定向未认证用户到登录页
    if (!token) {
      if (WHITE_LIST.includes(to.path)) {
        return true
      }
      return LOGIN_PATH
    }
    
    // 3. 如需初始化动态路由
    if (!authMenuList.length) {
      return await handleDynamicRouterInit(to.fullPath)
    }
    // ...
  }
)

此守卫执行几个关键检查：

  1. 重定向未认证用户到登录页（白名单路由除外）
  2. 重定向已认证用户离开登录页
  3. 如未加载动态路由，则初始化

登出流程

登出流程彻底清理应用程序状态：

async logout() {
  try {
    // 1. 清除用户状态
    this.token = ''
    this.userInfo = {}
    
    // 2. 重置页面标题
    document.title = import.meta.env.VITE_APP_TITLE
    
    // 3. 清除存储数据并重置其他存储
    removeAllItem()
    s_appStore().$reset()
    
    // 4. 清理动态路由
    const { clearExistingRoutes } = await import('@/router/dynamicRouter')
    clearExistingRoutes()
    
    // 5. 导航到登录页
    router.replace('/login')
    // ...
  } catch (error) {
    // ...
  }
}

此彻底清理确保登出后无敏感数据残留，并为新登录做好准备。

实践应用

实现自定义权限检查

要在组件中实现自定义权限检查，可以使用权限存储：

<script setup>
import { s_permissionStore } from '@/stores/permission'

const { authButtonList } = storeToRefs(s_permissionStore())

// 检查特定按钮权限
const canEditUser = computed(() => authButtonList.value['user:edit'])
</script>

<template>
  <button v-if="canEditUser">编辑用户</button>
</template>

此方法确保只有具有适当权限的用户才能看到UI元素。

最佳实践

在使用身份验证和授权系统时：

  1. 始终在后端验证权限 - 不要仅依赖UI隐藏
  2. 使用路由元数据表示权限要求 - 使授权逻辑更清晰
  3. 优雅处理过期令牌 - 会话超时时显示友好消息
  4. 实现适当的错误处理 - 身份验证失败应友好提示
  5. 使用不同权限集进行测试 - 确保UI适应不同用户角色

总结

遵循这些指南，您将创建既安全又用户友好的功能，并正确集成到Robot Admin的身份验证和授权系统中。理解这个完整的认证与授权流程，将帮助您更好地开发和维护安全的管理后台应用。

 期待共建！

如果这套组件系统对你的开发工作有所启发或帮助，请不要吝啬你的 Star！每一个 ⭐ 都是对我最大的鼓励和支持。

👉 点击这里 Star 支持项目 （🧧行大运摸大票💰）

🔗 探索更多资源

📋 资源类型🔗 链接📝 说明
🎯 在线预览robotadmin.cn体验完整功能演示
📚 详细文档tzagileteam.com深入了解实现细节
💻 源码仓库https:/github.com/ChenyCHENYU/Robot_Admin获取完整源代码

💬 参与讨论

你的项目是如何管理组件的？有什么更好的实践想要分享吗？

非常期待听到你的想法！

  • 💡 分享经验：在评论区告诉我们你的组件管理方案
  • 🐛 发现问题：在 GitHub Issues 中反馈遇到的问题
  • 🔧 贡献代码：提交 PR 帮助完善项目
  • 📖 完善文档：帮助改进项目文档和示例

💌 感谢每一位开发者的支持与贡献！

🎉 Star 数量达到 100 时，将发布更多高级组件！🎉

avatar
文章
阅读
粉丝