reactjs 将jwt标记设置为localStorage后无法获取它(不刷新页面)

bxjv4tth  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(143)

登录后,我正在保存从后端应用程序返回的jwt令牌,如下所示:

const login = (event) => {
  event.preventDefault();
  postWithoutAuth("/auth/login", formValues, enqueueSnackbar)
    .then((response) => {
      localStorage.setItem("currentUser", response.data.id);
      localStorage.setItem("username", response.data.username);
      localStorage.setItem("tokenKey", response.data.token);
      localStorage.setItem("roles", JSON.stringify(response.data.roles));
      navigate("/");
      // window.location.reload(true);
    })
};

然后导航到主页。在这一步,所有设置的值都存在于localStorage中。
但是,当我点击任何列表菜单并检索数据时,后端应用的请求命中没有jwt值。另一方面,如果我在登录后刷新页面(如登录方法(// window.location.reload(true);)中所示),则没有问题。
现在,我唯一需要的是,当我登录后导航到主页时,使前端应用程序avare的localStorage值。那么,我该怎么做呢?
下面是我的列表方法:

useEffect(() => {
    fetchData();
  }, []);

const fetchData = () => {
  const userId = localStorage.getItem("currentUser");
  getWithAuth("/users/")
    .then((response) => {
      setData(response.data);
    })
};

**Update-II:**以下是检索jwt并将其作为axios config传递给请求的问题部分:

const AUTH_TOKEN = localStorage.getItem("tokenKey");

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true,
    "Content-Type": "application/json",
    Accept: "application/json",
    Authorization: `Bearer ${AUTH_TOKEN}`
  },
};

export const getWithAuth = (url) => {
  const request = axios.get(url, config);
  return request.then((response) => response.data);
};
o2rvlv0m

o2rvlv0m1#

这里的问题是您没有解析localStorage中的值。

const userId = localStorage.getItem("currentUser");
let currentUserId=  JSON.parse(userId);

这应该能完美地工作。

相关问题