Блог

Я пишу небольшое приложение POC, по сути, минимальный клон facebook. Я использую react-запрос с клиентом axios, сгенерированным Orval, для использования конечных точек REST, предоставляемых службой FastAPI, работающей локально. Аутентификация управляется AWS Cognito с помощью токенов JWT, и я использую модуль AWS Amplify на интерфейсе для получения токенов JWT. Мой код выглядит следующим образом:

 useEffect(
() =>
  onAuthUIStateChange((nextAuthState, authData) => {
    console.log(AXIOS_INSTANCE.interceptors);
    if (nextAuthState === "signedin") {
      console.log(authData);

      // @ts-ignore
      const jwtToken = authData?.signInUserSession.accessToken.jwtToken;
      const returnedInterceptorId = AXIOS_INSTANCE.interceptors.request.use(
        (config) => ({
          ...config,
          headers: jwtToken
            ? {
                ...config.headers,
                Authorization: `Bearer ${jwtToken}`,
              }
            : config.headers,
        })
      );

      userDispatch({
        type: "LOG_IN",
        user: authData,
      });
      setInterceptorId(returnedInterceptorId);
    } else if (nextAuthState === "signedout") {
      console.log("OUT");
      userDispatch({ type: "LOG_OUT" });
      AXIOS_INSTANCE.interceptors.request.eject(interceptorId!);
      setInterceptorId(undefined);
    }
  }),
[]
 

);

По сути, при операциях входа в систему я добавляю перехватчик в экземпляр axios, используемый моим клиентом react-запроса, чтобы включить токен JWT в запрос. Это прекрасно работает.

При выходе из системы я хочу извлечь такой перехватчик, чтобы очистить токены. Я вижу, как срабатывает логика выхода, НО. При входе в систему с другим пользователем запрос react обновляется, отправляя запрос с токенами предыдущего пользователя. (Если я проверю запрос на вкладке «Сеть», скопирую JWT и расшифрую его, я увижу, что в нем есть данные предыдущего пользователя.) С другой стороны, при жестком обновлении приложения (т. Е. Перезагрузке страницы) затем используется правильный JWT нового пользователя.

Я проверил, что после выхода из системы одного пользователя и входа в систему с другим идентификатор перехватчика axios меняется. Я проверил, что логика выхода выполняется правильно, поэтому не уверен, как сохраняются jwt. Я включаю список своих зависимостей ниже

 "dependencies": {
    "@aws-amplify/ui-components": "^1.7.9",
    "@aws-amplify/ui-react": "^1.2.16",
    "@material-ui/core": "^4.12.3",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.24",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "axios": "^0.21.4",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "install": "^0.13.0",
    "lodash": "^4.17.21",
    "npm": "^7.23.0",
    "orval": "^5.5.9",
    "prettier": "^2.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.23.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.4.2",
    "web-vitals": "^1.1.2"
  },