ronna-admin-doc ronna-admin-doc
首页
  • 介绍
  • 快速开始
  • 目录结构
  • vscode文件夹详解
  • 平台配置
  • 布局
  • 路由和菜单
  • http请求
  • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 其他

    • 常见问题
    • 非平台问题跟踪记录
    • 问题反馈
    • git常用命令
    • 技术网站推荐
资源
  • Github日志 (opens new window)
优质服务
赞助
GitHub (opens new window)
首页
  • 介绍
  • 快速开始
  • 目录结构
  • vscode文件夹详解
  • 平台配置
  • 布局
  • 路由和菜单
  • http请求
  • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 其他

    • 常见问题
    • 非平台问题跟踪记录
    • 问题反馈
    • git常用命令
    • 技术网站推荐
资源
  • Github日志 (opens new window)
优质服务
赞助
GitHub (opens new window)
  • 指南

    • 介绍
    • 快速开始
    • 目录结构
    • .vscode文件夹详解
    • 平台配置
    • 布局
    • 路由和菜单
    • http请求
    • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
      • 单点登录
        • 前端实现步骤划分
        • 完整代码
        • url 格式
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 其他

    • 常见问题
    • 非平台问题跟踪记录
    • 问题反馈
    • git常用命令
    • 技术网站推荐
目录

单点登录

单点登录有效减少繁琐的登录操作,优化了用户体验

# 单点登录

单点登录主要功能在后端,这里只讲述使用 ronna-admin 前端代码如何实现
下面以完整版为例,精简版想要开启单点登录只需将 import "@/utils/sso" (opens new window) 注释解开即可

# 前端实现步骤划分

  • 先判断是否为单点登录,不为则直接返回不再进行任何逻辑处理,下面是单点登录的处理步骤
  1. 清空本地旧信息 (opens new window)
  2. 获取 url 中的重要参数信息,然后通过 setToken 保存在本地 (opens new window)
  3. 删除不需要显示在 url 的参数,这样做更安全 (opens new window)
  4. 使用 window.location.replace 跳转正确页面,window.location.replace 可以替换浏览器历史记录项 (opens new window)

# 完整代码

点击查看完整代码 (opens new window)

# url 格式

以平台的预览地址为例

完整地址 https://admin.ronnaces.com/#/welcome?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin

https://admin.ronnaces.com  域名

/#/welcome  要跳转的页面(这里是hash路由模式,根据实际情况修改即可)

?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin  需要携带的三个(username、roles、accessToken)必传参数
上次更新: 2024/04/07, 15:35:23
类型声明
自定义免登录

← 类型声明 自定义免登录→

Theme by Vdoing | Copyright © 2018-2024 kunlong-luo | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式