单点登录token存本地

于 2024-05-14 15:12:35 发布
阅读量165 收藏 2
点赞数 8
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44239362/article/details/138855930
版权

单点登录token存本地localstorage

1、认证中心获取token存储在本地 -> 要进入子系统时，使用postmessage向子系统发送token，并存储在子系统的localstorage中

// 创建一个iframe，在iframe中加载一个跨域的网页
const iframe = document.createElement('iframe')
iframe.style.height = '0'
iframe.style.display = 'none'
iframe.src = `${url}/settoken.html`
document.body.append(iframe)
// 使用postMessage()方法将token传递给iframe
iframe.onload = () => {
  iframe.contentWindow.postMessage(`info|${token}`, url)
  // 监听 子系统 的回调
  this.listener = window.onmessage = (event) => {
    if (event.data === 'jump') {
    // 跳转到子系统
      window.open(url)
      this.listener = null
    }
  }
}

2、子系统的public文件夹下创建settoken.html，用来存储token

<!DOCTYPE html>
<html lang="zh">
  <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<title></title>
  </head>
  <body>
    <noscript>
  	  <strong>抱歉，javascript被禁用，请开启后重试。</strong>
    </noscript>
    <div >1111111</div>
  </body>
 
  <script>
    // 监听跨域跳转获取新token存入localStorage实现获取访问令牌
    let listener = window.onmessage = (event) => {
      if (Object.prototype.toString.call(event.data).slice(8, -1) === 'String') {
        const [key, value] = event.data.split('|')
        if (key === 'info') {
          localStorage.setItem('Admin-Token',value)
          // 告诉上层 window，已保存token，可以开始跳转了
          window.parent.postMessage('jump', '*')
          listener = null
        }
      }
    }
  </script>
</html>

注意：这里使用window.onmessage，用window.addEventListener会导致重复触发

米芝芝
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
阿里P8架构师谈：单点登录的原理、来源、实现、以及技术方案比较
weixin_47908466的博客
09-22 715
为什么需要单点登录 单点登录SSO（Single Sign On）说得简单点就是在一个多系统共存的环境下，用户在一处登录后，就不用在其他系统中登录，也就是用户的一次登录能得到其他所有系统的信任。 单点登录在大型网站里使用得非常频繁，例如，阿里旗下有淘宝、天猫、支付宝等网站，还有背后的成百上千的子系统，用户一次操作或交易可能涉及到几十个子系统的协作，如果每个子系统都需要用户认证，不仅用户会疯掉，各子系统也会为这种重复认证授权的逻辑搞疯掉。 所以，单点登录要解决的就是，用户只需要登录一次就可以访问所有相互
单点登录中的JSON WEB TOKEN的使用方法C#版
03-21
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种...该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。本实例还原了整个的使用流程。建议使用vs2019,framework4.8版本。
登录的token配置方法和存放位置
qq_46130027的博客
07-03 2453
Token（令牌）是一种用于验证和授权用户访问资源的身份凭证。在许多应用程序中，用户在登录时会获得一个唯一的令牌，用于在后续的请求中进行身份验证。无论是服务器端存储还是客户端存储，都需要采取适当的安全措施来保护令牌的机密性和完整性。这包括使用安全的传输协议（如HTTPS），适当的令牌过期时间和刷新机制，以及防止跨站点请求伪造（CSRF）等攻击的措施。总之，令牌的配置和存储方式取决于应用程序的设计和安全要求。根据具体情况，可以选择服务器端存储、JWT 或客户端存储等方式来管理和传递令牌。
Token一般存放在哪里
wufaqidong1的博客
08-15 1万+
CSRF:跨站请求伪造，简单的说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如：发邮件、发信息、甚至财产操作如转账和购买商品）。这利用了web中用户身份验证的一个漏洞：简单的身份验证职能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出去的。这些类型的XSS攻击可以得到每个人的Web存储来访问你的网站。支持localStorage的一派则认为：撇开localStorage的各种优点不谈，如果做好适当的XSS防护，收益是远大于风险的。...
如何保存token-localStorage存储
热门推荐
qq_27474555的博客
12-03 1万+
1、原理 原理是通过vue-router的beforeEach钩子，在每次路由到一个地址的时候先判断该路由是否携带了meta信息，且该信息中的requireAuth是否为true，如果为true表示该路由是需要身份验证的。则去localStorage找token，若token不存在则表示用户无认证，去登录请求token。若token存在则拿着token去请求。 2、token保存 login.vu...
Token一般存放在哪里？各有什么不同？
qq_30597401的博客
05-24 3110
Token 其实就是访问资源的凭证。 一般是用户通过用户名和密码登录成功之后，服务器将登陆凭证做数字签名，加密之后得到的字符作为token。 它在用户登录成功之后会返回给客户端，客户端主要有这么几种存储方式： 1．存储在localStorage 中，每次调用接口的时候都把它当成一个字段传给后台 2．存储在cookie 中，让它自动发送，不过缺点就是不能跨域 3．拿到之后存储在 localStorage 中，每次调用接口的时候放在 HTTP 请求头的 Authorization 字段里 所以to.
单点登录token与JWT
中都
03-19 232
token其实就是token+redis的组合，token本身是无意义的，保证唯一就好了；JWT：他的token是有意义的，加密的，包含业务信息的，一般是用户信息，可以被解密出来；
.net 单点登录的设计与实践
01-20
最近轮到我在小组晨会来分享知识点，突然想到单点登录，准备来分享下如何实现单点登录，所以有了下文。实现方案以及代码可能写得不是很严谨，有漏洞的地方或者错误的地方欢迎大家指正。　 刚开始头脑中没有思路，...
Jtoken SSO单点登录模块
04-21
在开发系统的时候，需要用到单点登录系统，查了很多资料，最后选用了这个方案，解压包里有代码，有使用文档，这个比较简单好用一些，
单点登录学习
09-06
* 基于Token的单点登录：使用Token机制来存储用户的身份信息。 CAS（Central Authentication Service）是一种常用的单点登录协议，它提供了一个集中式的身份验证机制，允许用户使用一个用户名和密码来访问多个相关...
单点登录流程
09-13
单点登录 1、涉及文件 AdAction.java; LoginAction.java; AdminuserAction.java; SingonFilter; 2、技术实现思路 (1) 当第一次访问MBS系统时，因为还没有登录，会被引导到ad.do方法，ad.do转接到login.do方法，...
token 一般存放在哪里，为什么不存放在 cookie 内
subsistent的博客
02-16 3094
token一般放在本地存储中。token的存在本身只关心请求的安全性，而不关心token本身的安全，因为token是服务器端生成的，可以理解为一种加密技术。但如果存在cookie内的话，浏览器的请求默认会自动在请求头中携带cookie，所以容易受到csrf攻击。
Token以及Token的存储
CatCherry的博客
05-06 5285
客户端发送HTTP请求携带的“令牌”，用来鉴权、身份验证（服务器可以知道是谁在请求）
简单的单点登录
最新发布
m0_64497559的博客
10-31 74
将每次登陆的token存储在redis中记录，每次登陆时会做一个逻辑：在redis中是否存在token，有的话取出来，做判断，两次token不一致，当第二次登陆时，会覆盖掉第一次登陆的token，这样第一次登陆的用户在前端发起下次一请求时携带的还是第一次的token，判断不一致，则拦截，返回前端token失效，账号在异地登陆。思路：每次账号登录都会生成一个token，我们做拦截器，每次请求都会去解析token，看是否有效，有效则继续访问接口请求，无效则拦截。判断redis存储的与携带的是否一致。
Token ，Cookie、Session 三者区别
lizhengyu891231的博客
11-09 1042
转载自：cnblogs.com/JamesWang1993/p/8593494.html 叙述 在做接口测试时，经常会碰到请求参数为token的类型，但是可能大部分测试人员对token，cookie，session的区别还是一知半解。 Cookie cookie 是一个非常具体的东西，指的就是浏览器里面能永久存储的一种数据，仅仅是浏览器实现的一种数据存储功能。 cookie由服务器生成，发送给浏览器，浏览器把cookie以kv形式保存到某个目录下的文本文件内，下一次请求同一网站时会把该cookie
Token实现单点登陆
qq_41891805的博客
10-12 3232
单点登陆（Single Sign On） 在分布式的微服务架构中，存在多台服务器，在某一台服务器进行登陆后，多台服务器可同时检测到登陆状态 三种方式 ①Session广播机制 实质为session的复制 ②cookie+redis实现 将登陆后的数据放置到redis中，将其key存储到cookie中 ③使用token是实现（令牌机制） Token 按照一定的规则生成字符串，可包含用户信息： JWT头信息+有效载荷（主体部分）+签名哈希（防伪标志） 将生成的字符串返回给客户端，每次访问可携带token 借助t
单点登录☞token
qq_45398535的博客
05-12 1622
单点登录
单点登录原理、解决方案、基于satoken的实现
love_eat_peach的博客
06-20 3818
当前会话是否登录：" + StpUtil.isLogin() + "
vue3登录 token存本地
05-30
好的，您想了解如何在Vue3中实现登录并将token存储在本地吗？ 首先，在登录成功后，将token存储在本地可以使用浏览器提供的localStorage或sessionStorage。在Vue3中，可以在Vue实例的创建过程中，通过创建一个全局的$store对象来实现存储和管理状态数据。 以下是一些示例代码，可以帮助您更好地了解如何在Vue3中实现登录并将token存储在本地： 1. 在登录页面中，您可以通过表单提交来处理用户输入的登录信息，如下所示： ``` <template> <form @submit.prevent="login"> <label> Email: <input type="email" v-model="email" required> </label> <label> Password: <input type="password" v-model="password" required> </label> <button type="submit">Login</button> </form> </template> <script> export default { data() { return { email: '', password: '' } }, methods: { async login() { // 发送登录请求并获取token const { token } = await api.login(this.email, this.password) // 将token存储到本地 localStorage.setItem('token', token) // 跳转到首页或其他需要登录的页面 this.$router.push('/') } } } </script> ``` 2. 在Vue实例的创建过程中，可以创建一个全局的$store对象来存储和管理状态数据，如下所示： ``` import { createStore } from 'vuex' const store = createStore({ state() { return { token: localStorage.getItem('token') || null } }, mutations: { setToken(state, token) { state.token = token } } }) export default store ``` 在上面的代码中，我们通过使用localStorage.getItem('token')来获取本地存储的token值，并将其存储在Vuex的状态管理中。 3. 在需要使用token的地方，可以通过Vuex的getters来获取存储在状态管理中的token值，如下所示： ``` <template> <div v-if="$store.getters.isAuthenticated"> <!-- 显示需要登录后才能访问的内容 --> </div> <div v-else> <p>Please login to access this content.</p> </div> </template> <script> export default { computed: { isAuthenticated() { return !!this.$store.state.token } } } </script> ``` 在上面的代码中，我们使用了Vuex的getters来获取存储在状态管理中的token值，并将其用于判断用户是否已经登录。 希望这些示例代码能够帮助您更好地了解如何在Vue3中实现登录并将token存储在本地。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值