jwt acess_token和refresh_token机制: axios :如何持续检查access_token是否正常工作

Question

我使用的是基于JWT令牌的身份验证系统。即我后端的djangorestframework-simplejwt

现在我使用reactj和axios作为前端：

在向login api提供用户名和传递后，我获得了access_token和refresh_token，并将它们存储在本地存储中

现在，我正在尝试使用access_token连接到api。

我得到了Token invalid or expired

例如，我正在尝试使用此接口更改密码并提供access_token

  const url = "dj-rest-auth/password/change/";
  const auth = {
    headers: {
      Authorization: "Bearer " + localStorage.getItem("access_token"),
      Accept: "application/json",
      "Content-Type": "application/json",
    },
  };
  const data = {
    old_password: old_password,
    new_password1: new_password1,
    new_password2: new_password2,
  };
  const promise = axios.post(url, data, auth);
  promise
    .then((res) => {
         console.log(res)
      })
    .catch((err) => {
        if (err.response) {
          console.log(`${err.response.status} :: ${err.response.statusText}`)
          console.log(err.response.data)
        }
      })

当我遇到错误时，我可以使用refresh_token进行另一个api调用来获取access_token。

但有时，错误可能是由于网络错误或其他原因造成的。然后，即使我尝试使用refresh_token获取access_token，它也会陷入循环。

HOw以正确的方式做到这一点

Answer 1

1. 如果你使用Django作为后端，我建议使用dj-rest-auth进行JWT令牌认证。dj-rest-auth需要"djangorestframework-simplejwt“来进行令牌管理。

1. 建议将访问令牌和刷新令牌存储在httponly cookie中，这样javascript就不会访问它。

1. 在settings.py中添加JWTtokenAuthentication作为身份验证类。

身份验证={ 'DEFAULT_AUTHENTICATION_CLASSES'：'dj_rest_auth.jwt_auth.JWTCookieAuthentication‘}

1. 还在settings.py中添加以下配置

REST_SESSION_LOGIN = False SITE_ID=1 REST_USE_JWT = True JWT_AUTH_COOKIE =‘访问令牌’#any name JWT_AUTH_REFRESH_COOKIE = 'refresh_token‘#any name JWT_AUTH_SECURE = True CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True

1. 有一个关于dj-rest-auth的公开问题，它需要在你的后端Github问题中实现以下代码：https://github.com/iMerica/dj-rest-auth/issues/97。按照建议的解决方法，您必须创建一个middleware.py文件并粘贴到下面的代码。

从django.utils.deprecation导入json从yourapp.settings导入MiddlewareMixin从settings.py导入JWT_AUTH_REFRESH_COOKIE #

class MoveJWTRefreshCookieIntoTheBody(MiddlewareMixin):

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        return response

    def process_view(self, request, view_func, *view_args, **view_kwargs):
        if request.path == '/token/refresh/' and JWT_AUTH_REFRESH_COOKIE in request.COOKIES:
            if request.body != b'':
                data = json.loads(request.body)
                data['refresh'] = request.COOKIES[JWT_AUTH_REFRESH_COOKIE]
                request._body = json.dumps(data).encode('utf-8')
            else:
                print("The incoming request body must be set to an empty object.")

        return None

1. 至此，您的后端将成功生成访问令牌和刷新令牌。即使是您的后端也能够使用刷新令牌来刷新访问令牌。

前端：

1. 默认情况下，访问令牌和刷新令牌存储在httponly cookie中，因此您无需担心该部分。

1. Axios可用于调用登录端点以获取令牌。确保在请求中使用"withCredentials“和"Headers”。

rest响应将是令牌，默认情况下它将存储在 cookie中，因为我们使用的是dj-

1. -auth。对于所有连续的请求，将包括httponly cookie，如果令牌有效，将为用户提供访问权限。如果令牌已过期，则需要调用刷新端点以获取新的访问令牌。

1. 由于您处于开发模式，BE和FE必须具有相同的域，不同的服务器可以使用以下命令启动django- ports.You，并确保您的FE也在本地主机上运行

python manage.py运行服务器localhost:8080

dj-rest-auth：https://dj-rest-auth.readthedocs.io/en/latest/index.html