JWToken

JWToken,全称JSON Web Token,是一种用于身份验证和授权的开放标准(RFC 7519)。以下是对JWToken的详细解释:

一、定义与组成

  • 定义:JWToken定义了一种紧凑且自包含的方式,用于作为JSON对象在各方之间安全地传输信息。此信息经过数字签名,因此可以验证和信任。

  • 组成:JWToken由三部分组成,分别是头部(Header)、有效负载(Payload)和签名(Signature)。

    • 头部:包含了描述JWT的元数据信息,通常由两部分组成,即声明类型和加密算法。例如,头部可能包含如下信息:{"alg":"HS256","typ":"JWT"},其中alg表示加密算法,typ表示令牌类型。
    • 有效负载:JWT的主要信息存储位置,可以包含用户身份信息、权限等。这些信息以键值对的形式表示,例如:{"sub":"1234567890","name":"John Doe","admin":true},其中sub表示用户ID,name表示用户名,admin表示用户是否具有管理员权限。
    • 签名:由头部、有效负载和密钥共同组成,用于验证Token是否有效。签名通常使用HMAC算法或RSA、ECDSA等公钥/私钥对进行生成。

二、工作原理

  1. 客户端通过POST请求将用户名和密码提交给服务器。
  2. 服务器验证客户端的身份信息,如果验证通过,则生成一个JWToken,并将其返回给客户端。
  3. 客户端将接收到的JWToken存储在本地(如localStorage或sessionStorage中),以便后续请求时使用。
  4. 客户端再次发起请求时,通过Authorization字段将JWToken作为请求头发送给服务器。
  5. 服务器对接收到的JWToken进行解析和验证,如果验证通过,则允许客户端访问受保护的资源。

三、应用场景

  1. 授权认证:JWT最常见的应用场景之一。用户登录后,每个后续请求都将包括JWT,允许用户访问该令牌允许的路由、服务和资源。单点登录(SSO)是目前广泛使用JWT的一个功能,因为它的开销很小,并且能够在不同的域中轻松使用。
  2. 信息交换:JWT是在各方之间安全传输信息的好方法。由于JWT可以签名,因此可以确保发送者就是他们所说的那个人。此外,由于签名是使用头部和有效负载计算的,因此还可以验证内容是否未被篡改。

四、优势与注意事项

  • 优势

    • 紧凑性:JWT比SAML等令牌更紧凑,适合在HTML和HTTP环境中传递。
    • 安全性:JWT使用数字签名验证令牌的完整性,可以确保信息在传输过程中不被篡改。
    • 易用性:JWT的解析器在大多数编程语言中都很常见,因为它们直接映射到对象,使得使用JWT比使用XML等其他格式更容易。
  • 注意事项

    • 不应将敏感信息放入JWT中,因为签名令牌中的信息会向外公开(尽管无法更改)。
    • JWT的有效期应设置得合理,避免过长或过短导致的安全问题。
    • 在存储和传输JWT时,应采取适当的安全措施,以防止令牌被泄露或截获。

综上所述,JWToken是一种安全可靠的身份验证和授权机制,它可以用于保护互联网应用的安全性,并为用户提供更简单和高效的身份验证和授权方式。

在 React 中,存储和获取 token 可以通过以下几种常见方式实现。 ### 存储 token - **存入 Redux 和本地 localStorage**:在 `src/store/modules/user.js` 中,通过同步修改方法将 token 存入 Redux 状态管理库和本地 localStorage。示例代码如下: ```javascript // src/store/modules/user.js import { setToken as _setToken, getToken } from "@/utils"; // 同步修改方法 reducers: { setToken(state, action) { state.token = action.payload; // 存进本地 _setToken(action.payload); } } ``` 这里通过 `setToken` 方法将 token 存储到 Redux 的状态中,同时调用 `_setToken` 函数将 token 存入本地 localStorage[^1]。 - **存入本地 localStorage**:在 `authActions.js` 中,用户登录成功后,将返回的 token 存储到本地 localStorage 中。示例代码如下: ```javascript // authActions.js import axios from 'axios'; // 引入设置token方法 import setAuthToken from '../utils/setAuthToken.js'; // 引入type类型 import { GET_ERRORS } from './types'; // 登录信息 export const loginUser = (userData, history) => dispatch => { axios.post('/api/users/login', userData) .then(res => { // 对返回的token进行解构,并存储 const { token } = res.data; localStorage.setItem('jwToken', token); // 设置axios的headers token setAuthToken(token); }) .catch(err => { // 在登录信息错误的时候用dispatch把信息返回回去 dispatch({ type: GET_ERRORS, payload: err.response.data }); }); }; ``` 此代码中,登录成功后,使用 `localStorage.setItem` 方法将 token 存储到本地 localStorage 中,键名为 `jwToken`[^4]。 ### 获取 token - **从 Redux 中获取**:如果 token 存储在 Redux 中,可以通过相应的选择器函数从 Redux 状态中获取 token。具体实现取决于 Redux 的配置和使用的库。 - **从本地 localStorage 中获取**:可以使用 `localStorage.getItem` 方法从本地 localStorage 中获取存储的 token。示例代码如下: ```javascript const token = localStorage.getItem('jwToken'); ``` 这里通过 `localStorage.getItem` 方法获取键名为 `jwToken` 的 token 值。 ### 携带 token 进行 API 请求 在对 API 提交请求时,需要同时携带 token 以便后端验证用户权限。示例代码如下: ```javascript /** * 这个函数是用来代替原生的fetch函数 */ export async function fetchGet(url) { const userInfo = checkLogin(); const token = userInfo ? userInfo.token : ''; const res = await fetch(url, { headers: { 'token': token } }); // 后端授权检测失败 if (res.status === 401) { message.error('您已经退出登录'); localStorage.removeItem('userInfo'); return res; } return res; } ``` 此代码中,通过 `fetch` 函数发送请求时,在请求头中添加 `token` 字段,值为获取到的 token,以便后端进行权限验证[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值