reactjs - rxjs BehaviorSubject returning NULL when queried in React - Stack Overflow

admin管理员组

文章数量:1345198

I need to append the current user to my authHeader so the backend can authorise access to the route called. The code below exposes an rxjs BehaviorSubject to provide the user to any component that calls it.

user.service.js

import { BehaviorSubject } from "rxjs";

const userSubject = new BehaviorSubject(null);

export const userService = {
  user: userSubject.asObservable(), // Observable for the current user
  get userValue() {
    return userSubject.value; // Get the current user value
  },
};

However, when I call the userSubject from another component with the code below, the value comes back as NULL.

fetch-wrapper.js

import { userService } from "../features/users/user.service";

export const fetchWrapper = {
  post,
};

function post(url, body) {
  console.log("fetchWrapper user: ", userService.userValue); // Early check is NULL
  const requestOptions = {
    method: "POST",
    headers: { "Content-Type": "application/json", ...authHeader(url) },
    credentials: "include",
    body: JSON.stringify(body),
  };
  return fetch(url, requestOptions).then(handleResponse);
}

function authHeader(url) {
  // return auth header with jwt if user is logged in and request is to the api url
  const user = userService.userValue;
  console.log("authHeader user", user); // Value is still NULL
  const isLoggedIn = user && user.jwtToken;
  const isApiUrl = url.startsWith(config.apiUrl);
  if (isLoggedIn && isApiUrl) {
    return { Authorization: `Bearer ${user.jwtToken}` };
  } else {
    return {};
  }
}

Does anyone have advice on how to use the userSubject properly so I can access the userSubject.value please? I've reviewed other articles on the web and haven't been able to find anything. I suspect it's a timing issue but I'm not sure how to wait for the value to be updated. But if it is a timing problem, then I don't really see the point of making an Observable in the first place.

EDIT

I changed the authHeader function to use firstValueFrom instead which works if the user navigates to the page that fetches the data but it doesn't work if the user refreshes the browser.

Revised authHeader function in fetch-wrapper.js

async function authHeader(url) {
  // return auth header with jwt if user is logged in and request is to the api url
  const user = await firstValueFrom(userService.user);
  // Returns a user value if user navigates to the page
  // Returns NULL if the page is refreshed
  console.log("authHeader user", user);
  const isLoggedIn = user && user.jwtToken;
  const isApiUrl = url.startsWith(config.apiUrl);
  if (isLoggedIn && isApiUrl) {
    console.log("authHeader user.jwtToken", user.jwtToken);
    return { Authorization: `Bearer ${user.jwtToken}` };
  } else {
    return {};
  }
}

I also changed the post function so that the header component is created properly. Revised post function from fetch-wrapper.js

async function post(url, body) {
  let headers = await authHeader(url);
  headers = {
    "Content-Type": "application/json",
    ...headers,
  };
  const requestOptions = {
    method: "POST",
    headers,
    credentials: "include",
    body: JSON.stringify(body),
  };
  const response = await fetch(url, requestOptions);
  return handleResponse(response);
}

本文标签： reactjsrxjs BehaviorSubject returning NULL when queried in ReactStack Overflow