用于验证/更新 JWT 访问和刷新令牌的中间件

发布于 2025-01-09 11:44:15 字数 1455 浏览 0 评论 0原文

我有一个用 React/Django/Django-allauth 编写的带有 JWT 身份验证的应用程序。

我有一个端点来验证/刷新我的访问令牌,它工作正常。我的问题是关于在哪里放置刷新逻辑,以便在每个请求之前自动处理它?是否有我可以使用的中间件或者是否有办法覆盖 fetch

本质上,我希望应用程序验证令牌,必要时刷新令牌,并重定向未经身份验证的用户以登录依赖于 JWT 授权的每个请求。我也不想一遍又一遍地重写这个逻辑。

我正在考虑重写 fetch


async function handle_token() {
    const {valid, status} = await API.process_token()
    return {
        status,
        valid,
    } 
}

// initialize the fetch object to minimize code repeat at every request
// https://stackoverflow.com/questions/44820568/set-default-header-for-every-fetch-request
function updateOptions(options) {

  const update = { ...options }
  update.headers = Object.assign({
        'Content-Type': 'application/json',
        'Accept': 'application/json'
  }, update.headers ? update.headers : {})

  if(update.jwt) {
    const token = localStorage.getItem('access') ? localStorage.getItem('access') : ''
    update.headers = Object.assign(update.headers, {'Authorization': `Bearer ${token}`})

    /*******************************************************************************
     * Perhaps put token logic here but unser how to to handle it
    ********************************************************************************/
    const {valid, status} = handle_token()
}

  return update;
}


function fetcher(url, options) {
  return fetch(url, updateOptions(options));
}

export default fetcher;

或者也许有一个常用的中间件?谢谢

I have an app with JWT authentication written in React/ Django / Django-allauth.

I have an endpoint to verify/ refresh my access token and it works fine. My question is regards to where to put the refresh logic so it is automatically processed before each request? Is there middleware I can use or is there a way to override fetch?

Essentially, I want the app to verify the token, refresh it if necessary, and redirect unauthenticated user to login for every request dependent on JWT authorization. I also don't want to rewrite this logic over and over.

I'm thinking of overriding fetch


async function handle_token() {
    const {valid, status} = await API.process_token()
    return {
        status,
        valid,
    } 
}

// initialize the fetch object to minimize code repeat at every request
// https://stackoverflow.com/questions/44820568/set-default-header-for-every-fetch-request
function updateOptions(options) {

  const update = { ...options }
  update.headers = Object.assign({
        'Content-Type': 'application/json',
        'Accept': 'application/json'
  }, update.headers ? update.headers : {})

  if(update.jwt) {
    const token = localStorage.getItem('access') ? localStorage.getItem('access') : ''
    update.headers = Object.assign(update.headers, {'Authorization': `Bearer ${token}`})

    /*******************************************************************************
     * Perhaps put token logic here but unser how to to handle it
    ********************************************************************************/
    const {valid, status} = handle_token()
}

  return update;
}


function fetcher(url, options) {
  return fetch(url, updateOptions(options));
}

export default fetcher;

Or maybe there is a middleware that is common to use? Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文