【vue2.0-单点登录】

vue2.0-单点登录

  • 首先我们需要知道什么是单点登录

在多个应用系统中,只需要登录一次,就可以访问其他相互信任的应用系统。

单点登录的解决办法在网上有很多,这是我觉得好理解的解决办法:https://www.jianshu.com/p/613e44d4a464

以下就是我的解决方法:
1.在主系统的登录页
在登录成功的情况下,让后端接口返给前端一个token,前端在将此token存储在cookie中
2.在主系统里面会有个模块展示子系统
点击子系统的时候,你需要把在登录时存储在cookie中的token获取到
在这里插入图片描述
在这里插入图片描述
这样主系统这边就完成了
3.在子系统的首页直接获取cookie中的token,通过后端给的登录接口传token参数,成功返回后重新在cookie中存储新的token
在这里插入图片描述
这样单点登录就完成了

需要注意,在子系统里一定要在created获取一下token,如果有就调用首次进入页面需要的数据,如果没有,就需要获取token
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 单点登录结合 OAuth2.0 是一种常见的身份验证和授权机制。OAuth2.0 允许用户使用他们在其他应用程序中拥有的凭据来登录您的应用程序,而无需创建新的用户名和密码。 在 Vue 中实现单点登录结合 OAuth2.0 的步骤如下: 1. 注册 OAuth2.0 提供商:您需要选择一个 OAuth***获取客户端ID和客户端密钥。 2. 安装依赖:使用 npm 或 yarn 安装用于处理 OAuth2.0 的库,例如 `vue-oauth2-oidc`。 3. 配置 OAuth2.0 客户端:在 Vue 项目的配置文件中,将 OAuth2.0 客户端的配置信息(客户端ID、客户端密钥、授权终结点等)添加进去。 4. 实现登录和授权流程:在 Vue 组件中,您可以创建一个登录按钮或链接,当用户点击时触发 OAuth2.0 的登录流程。您可以使用 `vue-oauth2-oidc` 提供的方法来处理认证请求和获取访问令牌。 5. 处理回调:当用户成功登录并授权后,OAuth2.0 提供商将重定向用户到您的应用程序,并附带一个授权码。您需要在 Vue 组件中处理回调,验证授权码并交换访问令牌。 6. 保持登录状态:一旦您获得访问令牌,您可以将其存储在 Vue 的状态管理器(如Vuex)中,以便在应用程序的其他部分使用。您可以使用访问令牌来获取用户信息或调用受保护的 API。 通过以上步骤,您可以实现 Vue 单点登录结合 OAuth2.0。请注意,具体的实现细节可能因您选择的 OAuth2.0 提供商而有所不同,您需要查阅相关文档和示例代码来完成集成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值