Блог

Я регистрирую использование с помощью API, который возвращает JWT. Мой контекст заключается в следующем:

 const currentUserSubject = new BehaviorSubject(JSON.parse(localStorage.getItem('user')));  export const AuthContext = {  login,  logout,   currentUser: currentUserSubject.asObservable(),  get currentUserValue () { return currentUserSubject.value } };  return fetch(apiUrl, requestOptions) .then(response =gt; {  //response = JWT. JWT token is okay.  localStorage.setItem('user', response);  currentUserSubject.next(response); })  

Затем я пытаюсь получить доступ к этим значениям в моем App.js для отображения информации о пользователе и отображения/скрытия параметров меню. Вот что я должен сделать, чтобы:

 import { AuthContext } from 'path...';  const App = () =gt; {  const [user, setUser] = useState({  currentUser: null,  admin: false  });   useEffect(() =gt; {  AuthContext.currentUser.subscribe(x =gt; setUser({  currentUser: x,  admin: x amp;amp; x.role === "admin"  }));     console.log(user);   }, [user.currentUser]);  }  

Это пример ответа от API:

{«nbf»:1639039248,»exp»:1639042848,»iss»:»someurl»,»aud»:»someurl»,»client_id»:»api»,»sub»:»28576342-f931-458a»,»auth_time»:1639039248,»idp»:»local»,»role»:»admin»,»jti»:»values»,»iat»:1639039248,»scope»:[«api»],»amr»:[«pwd»],»token»:»Токен JWT»}

Основная проблема заключается в том, что, когда я вошел в систему, я не могу отобразить меню для роли администратора, а также я печатаю простой {user.admin}, и это значение равно false, пока я не обновлю страницу, а затем изменится на true.

Вот пример сообщений console.log (), которые я получаю:

Когда приложение загружается в первый раз:
{ Текущий пользователь: null, администратор: false }

Когда я вхожу в систему:
{ Текущий пользователь: все ответы от API, администратор: ложь }

После обновления страницы
{ текущий пользователь: весь ответ от API, администратор: true }

Что может быть причиной такого поведения и что я могу сделать, чтобы это исправить?