前端单击登录按钮实现登录的逻辑,使用cookie存储token

本文介绍了如何在前端使用cookie来存储和管理用户登录状态。首先,通过npm安装js-cookie库,然后在组件中引入并设置登录接口保存token。接着,创建请求拦截器,确保每个请求都携带token。一旦用户信息获取成功并存储,就可以在其他页面通过cookie.get()获取token,实现用户信息的跨页面访问。注意,存储的数据需转为Json字符串以便正确解析。
摘要由CSDN通过智能技术生成

使用cookie前, 先使用 npm install js-cookie 安装cookie

在组件中使用先引入cookie

 1.调用登录接口存储token

3.创建请求拦截器,如果有token就把token放到请求头中

先引入cookie,创建请求拦截器。

4.根据token获取用户信息,存储到本地token中,跳转页面。

在第三步设置了请求拦截器,本地有token再次发送请求时就会把token封装到请求头。

只有请求头封装了token,才能使后端返回对应的用户数据。

使用cookie存储用户数据不转Json字符串的话,在其他页面使用Json.parse会取不到

 

5.在其他页面如何获取用户信息

使用cookie.get('token名')  获取对应存储用户数据的token值

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端使用 token 实现单点登录的基本思路是,当用户登录成功后,后端会生成一个 token 并返回给前端前端将这个 token 存储在客户端,比如通过 Cookie 或者 LocalStorage。 然后,当用户访问其他需要进行身份验证的页面时,前端会将存储token 发送给后端进行验证。后端会校验 token 的合法性,如果验证通过,则表示用户已经登录过,可以继续访问。 以下是一个简单的示例代码,使用 JWT(JSON Web Token)来实现 token 的生成和验证: ```javascript // 登录成功后,后端生成 token 并返回给前端 const token = jwt.sign({ userId: '123' }, 'secretKey'); // 将 token 存储在客户端 localStorage.setItem('token', token); // 用户访问其他需要验证的页面时,将 token 发送给后端进行验证 const storedToken = localStorage.getItem('token'); // 发送 token 到后端进行验证 fetch('/api/verify', { headers: { Authorization: `Bearer ${storedToken}` } }) .then(response => { if (response.ok) { // 验证通过,继续访问 } else { // 验证失败,跳转到登录页 window.location.href = '/login'; } }); ``` 在后端,你需要验证传递过来的 token 的合法性,并且解析出其中的数据。如果验证成功,则表示用户已经登录过,可以继续处理请求;如果验证失败,则需要返回错误信息或者跳转到登录页。 需要注意的是,为了保证安全性,token 的生成和验证过程需要进行一定的加密和防篡改措施,比如使用 HTTPS 协议传输、设置合适的过期时间等。此外,为了防止 token 被盗用,还可以考虑使用刷新 token 的机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值