[英]using refresh token to get new access token react and node js
I've built a JWT API for user authentication.我已经构建了一个用于用户身份验证的 JWT API。 I want to use it with react.
我想在反应中使用它。 my app has these routes:
我的应用程序有这些路线:
Node js API Routes:节点 js API 路由:
http://localhost:8080/api/auth/signin
-> this route accepts username and password from react and sends back an access token to react which it will save it inside localstorage(I'm planning to use memory instead) and cookie containing refresh token with httpOnly enabled. http://localhost:8080/api/auth/signin
-> 此路由接受来自 react 的用户名和密码,并发送回一个访问令牌以进行 react 它将保存在 localstorage 中(我打算改用内存)和 cookie包含启用了 httpOnly 的刷新令牌。
http://localhost:8080/api/auth/signup
-> this route will add a new user to database based on user input(doesn't relate to authentication process) http://localhost:8080/api/auth/signup
-> 此路由将根据用户输入向数据库添加新用户(与身份验证过程无关)
http://localhost:8080/api/auth/refreshtoken
-> this route will return a new access token based on the sent refresh token from client which was saved inside cookies. http://localhost:8080/api/auth/refreshtoken
-> 此路由将根据客户端发送的刷新令牌返回一个新的访问令牌,该令牌保存在 cookie 中。 and then client will replace it with the expired access token.然后客户端将用过期的访问令牌替换它。
http://localhost:8080/api/test/user
-> this will check if user is signed in with the access token from client and will send the user data back http://localhost:8080/api/test/user
-> 这将检查用户是否使用来自客户端的访问令牌登录并将用户数据发送回
React Client Routes:反应客户端路由:
http://localhost:3000/login
-> a route for sending user information for logging in http://localhost:3000/login
-> 发送http://localhost:3000/login
用户信息的路由
http://localhost:3000/register
-> a route for creating a new user http://localhost:3000/register
-> 创建新用户的路由
http://localhost:3000/user
-> a protected route which needs user to be logged in to view data. http://localhost:3000/user
-> 需要用户登录才能查看数据的受保护路由。
when I log in to my website I can see the data inside the user route for 20 seconds before the access token expiry.当我登录到我的网站时,我可以在访问令牌到期前 20 秒内看到用户路由中的数据。 when the access token is expired and I do a new request the server will response with 401 unauthorized code.
当访问令牌过期并且我执行新请求时,服务器将使用 401 未经授权的代码进行响应。 so this way I can make sure that the access token is expired and I need to use refresh token.
这样我就可以确保访问令牌已过期并且我需要使用刷新令牌。 I've done that like this:
我已经这样做了:
const API_URL = "http://localhost:8080/api/test/";
const getUserBoard = () => {
return axios.get(API_URL + "user", { headers: authHeader() })
.catch((error) => {
if(error.response.status === 401) {
// if error response status was 401 then request a new token
authService.refreshToken();
window.location.reload();
}else if(error.response.status === 403) {
authService.logout();
window.location.href = "/login";
}
});
};
code to get new access token with refresh token:使用刷新令牌获取新访问令牌的代码:
const refreshToken = () => {
axios({
url: API_URL + "refreshtoken",
method: "POST",
withCredentials: true
})
.then((response) => {
if(response.data.accessToken) {
const user = JSON.parse(localStorage.getItem("user"));
user.accessToken = response.data.accessToken;
localStorage.setItem("user", JSON.stringify(user));
}
})
.catch((error) => {
console.log("server: " + JSON.stringify(error.response));
})
}
code to set header for receiving data from server using access token:使用访问令牌设置用于从服务器接收数据的标头的代码:
export default function authHeader() {
const user = JSON.parse(localStorage.getItem('user'));
if (user && user.accessToken) {
// for Node.js Express back-end
return { 'x-access-token': user.accessToken };
} else {
return {};
}
}
the first part for getting new access token on 401 error works good but my refresh token also expires after 40 second.在 401 错误上获取新访问令牌的第一部分效果很好,但我的刷新令牌也在 40 秒后过期。 if I send the expired refresh token it won't return a new access token.
如果我发送过期的刷新令牌,它不会返回新的访问令牌。 and because of that again I will receive a 401 error which again will cause a 403 error and here I'll get stuck in an infinite reload loop.
正因为如此,我将再次收到 401 错误,这将再次导致 403 错误,在这里我将陷入无限重载循环。
any idea?任何想法? how can I control tokens expiry?
我如何控制令牌到期?
You're issuing tokens in your node.js app, right?您正在 node.js 应用程序中发布令牌,对吗? So that is where you should adjust the expiration time of the token.
所以这就是你应该调整令牌到期时间的地方。 The code which issue tokens should have an option to set the expiration time.
发行令牌的代码应该有一个选项来设置到期时间。
Remember that once the refresh token is expired you should log in again.请记住,一旦刷新令牌过期,您应该再次登录。 You can implement something which is called a rolling refresh token.
您可以实现称为滚动刷新令牌的东西。 So whenever you call the
/api/auth/refreshtoken
endpoint you can also issue a new refresh token, with a new expiration time and return it in a cookie.因此,每当您调用
/api/auth/refreshtoken
端点时,您还可以发出新的刷新令牌,具有新的到期时间并在 cookie 中返回它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.