我正在为我的应用程序构建身份验证,并使用访问和刷新令牌。
用户登录时,API会发布3个问题
这些令牌都是jwt
令牌。
本文讨论了为什么应该拆分访问令牌。
使用express,我将令牌发送回控制器中的浏览器,如下所示:
res.cookie(
ACCESS_TOKEN_COOKIE_HEADER_PAYLOAD,
headerAndPayload,
COOKIE_OPTIONS,
)
res.cookie(
ACCESS_TOKEN_COOKIE_SIGNATURE,
signature,
COOKIE_OPTIONS_HTTP_ONLY,
)
res.cookie(REFRESH_TOKEN_COOKIE, refreshToken, COOKIE_OPTIONS)
return res.json({ username, uid })
auth.constants.ts
export const COOKIE_OPTIONS: CookieOptions = {
secure: true,
sameSite: 'lax',
}
export const COOKIE_OPTIONS_HTTP_ONLY: CookieOptions = {
httpOnly: true,
secure: true,
sameSite: 'lax',
}
export const ACCESS_TOKEN_COOKIE_HEADER_PAYLOAD = 'access_token_header_payload'
export const ACCESS_TOKEN_COOKIE_SIGNATURE = 'access_token_signature'
export const REFRESH_TOKEN_COOKIE = 'refresh_token'
在ui(react)中,我进入Chrome开发工具-
现在,当我想向我的应用编程接口发送一个请求来创建一些东西时(假设我正在创建一个新的博客文章),我想抓住这些cookie并将它们作为Authoration
Header传递。
我遵循这个人的建议,但我注意到他正在使用store
,我猜这是某种形式的状态。由于我没有这样做,而且多个源(源1、源2)指出,向API发送令牌进行身份验证的标准是使用Authorization
头,因此我希望遵循这一点。
目前,当我使用axios发出API请求时,我控制台会记录express请求
对象,并可以在cookie中看到我的令牌,如下所示:
headers: {
host: 'localhost:3001',
connection: 'keep-alive',
'content-length': '0',
accept: 'application/json, text/plain, */*',
'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36',
origin: 'http://localhost:3000',
'sec-fetch-site': 'same-site',
'sec-fetch-mode': 'cors',
'sec-fetch-dest': 'empty',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.9',
cookie: 'access_token_header_payload=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvc3R5cG9vIiwiaWF0IjoxNTk2ODM0MDIwLCJleHAiOjE1OTY4MzQwODB9; access_token_signature=3pUbxjWgly9xmYSJObOvTgps9qwjOIrHWWE4LPYidmQ; refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvc3R5cG9vIiwiaWF0IjoxNTk2ODM0MDIwLCJleHAiOjE1OTc0Mzg4MjB9.IKdRsaTTgAeUfwicLcBpRvw89WgYXy_rCRN5o2BJFqY'
},
但是我想把这些cookie作为Authorization:bearier发送
这是我的公理拦截器
import axios from 'axios'
const service = axios.create({
withCredentials: true,
baseURL: process.env.REACT_APP_API_BASE_URL,
timeout: 5000,
})
// Request interceptors
service.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
},
)
// Response interceptors
service.interceptors.response.use(
response => {
console.log('response', response)
return response.data
},
error => {
return Promise.reject({ ...error })
},
)
export default service
正如chinesedfan在本回复中所述。向后端API授权请求的方法是通过查询解析,因为cookie是HttpOnly,任何客户端都无法访问。
使用Express,可以通过创建设置授权头的全局中间件来实现这一点。下面的片段演示了如何做到这一点,假设您使用的是承载
// global middleware for setting authorization header
app.use((req, res, next) => {
const authHeader = req.cookies.accessToken;
if (authHeader) {
req.headers.authorization = `Bearer ${authHeader}`;
}
next();
});
// initialize passportjs
app.use(passport.initialize())
将此中间件添加到您的
server.js
中,假设您以这种方式命名您的初始化文件。在此声明快速应用变量。
在express中,中间件顺序很重要,因此在初始化passport中间件之前添加此中间件。
在您的前端,您不必向axios添加任何内容,只需向后端发出请求,如果该请求需要授权,它将自动添加到您。
HttpOnly意味着客户端脚本不能访问cookie,也不能从文档中读取cookie。cookie并传递给axios。
事实上,我认为HttpOnly cookie比http请求头更安全。您需要的是在服务器端解析auth cookie,而不是解析请求头。
这是我的第一篇文章。 我刚刚开始学习围棋和Angular,我正试图将角应用程序连接到围棋api。这两篇文章我都写过了,我一直在寻找问题的根源。我认为这是一个CORS问题,但是如果我不在角超文本传输协议请求中包含标题代码行,它就可以正常工作。在这一点上,我只是想添加标题。授权代码尚未实现。 这两个应用程序都在本地运行,Go应用程序位于端口5000,Angular应用程序位于端口4200 不起作用的角
我启用了 Lambda 代理集成,并将响应标头设置为 Lambda 输出和 API 网关的一部分,这些网关会将其作为 HTTP 响应的一部分返回给客户端。 示例代码: 我需要在标题中发送3个cookie。我试过了。但是失败了: [编辑]我连接了cookie并作为响应传入,客户端获得了cookie。但是当客户端在“位置”中调用目标时,请求的标头中没有cookie。 请帮助将这3个cookie发送给我
我以前问过这个问题,但没有得到答案。我可以使用下面的方法:“get”让它工作,所以这没关系,但这次我需要使用post。在另一个项目中(使用react、redux、php、webpack、xampp),同样的问题再次出现,我正在努力解决它。这就是: register.php index.js 当我做了以上的一切是好的,数据是日志作为'做某事'。但是,当我尝试使用axios({方法:'POST'})并
我正在使用GWT和Spring controller来管理http流量。有些请求可能需要很长时间,但我希望在超过给定时间时终止请求。 我如何配置超时Spring。我也使用Apache Tomcat 7.0。我试图在tomcat上inrease最大线程,但有一段时间tomcat工作缓慢,因为请求线程不会死。
我得到错误: 引起原因:java.net.URISynTaxExcema:索引7的预期权限:超文本传输协议:// 以下代码: 跟踪堆栈: 司机信息:司机。版本:组织上的RemoteWebDriver。openqa。硒。遥远的RemoteWebDriver。在org上执行(RemoteWebDriver.java:622)。openqa。硒。遥远的RemoteWebDriver。在org上启动会话(
我只是有一个关于服务中http请求的结构和处理响应的问题。我正在使用Angular2。alpha46 Typescript(刚刚开始测试-我喜欢它…Ps…。感谢所有一直致力于它并通过github作出贡献的人) 因此,采取以下措施: 登录表单。组成部分ts 从这个组件中,我导入了我的userService,它将容纳我的超文本传输协议请求,以登录用户。 使用者服务ts 我想做的是能够处理http请求之