下一个js数据获取与axios示例和授权

o2g1uqev  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(181)

我正在使用NextJS 12.0.10和next-redux-wrapper 7.0.5以及Axios自定义示例来保存保存在本地存储中的用户JWT令牌,并将其与每个请求一起注入拦截器,也将其注入每个响应中的传入错误
这样做的问题是,我无法在Next数据获取方法中使用Axios示例
因为当在服务器内部调用请求时,无法从本地存储中获取用户JWTToken。此外,我无法在出现故障时跟踪请求并快速发送刷新令牌
我尝试使用cookies,但是getStaticProps不提供req或resp obj我应该总是使用getServerSideProps

axios.js************

const axiosInstance = axios.create({
    baseURL: baseURL,
    timeout: 20000,
    headers: {
      common: {
        Authorization: !isServer()
          ? localStorage.getItem("access_token")
            ? "JWT " + localStorage.getItem("access_token")
            : null
          : null,
        accept: "application/json",
      },
    },
  });

登录切片. js

export const getCurrentUser = createAsyncThunk(
    "auth/getCurrentUser",
    async (_, thunkApi) => {
      try {
        const response = await axiosInstance.get("api/auth/user/");
        await thunkApi.dispatch(setCurrentUser(response.data));
        return response.data;
      } catch (error) {
        if (error.response.data) {
          return thunkApi.rejectWithValue(error.response.data);
        }
        toast.error(error.message);

        return thunkApi.rejectWithValue(error.message);
      }
    }
  );

页面.jsx

export const getStaticProps = wrapper.getStaticProps((store) => async (ctx) => {
  try {
    await store.dispatch(getCurrentUser());
  } catch (e) {
    console.log("here", e);
  }

  return {
    props: {},
  };
});
dpiehjr4

dpiehjr41#

服务器端渲染技术是一条单行道,如果你遵循标准的做法。你不会得到任何本地细节-它是cookie,本地存储或本地状态返回到服务器。
我会让服务器尽可能多地构建DOM(即使用空的用户数据),让客户机通过useEffect获取数据。

相关问题