import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axiosInstance from "../utils/axiosInstance";

export const logoutUser = createAsyncThunk(
  "users/logoutUser",
  async (_, { rejectWithValue, dispatch }) => {
    try {
      const response = await axiosInstance.post("/users/logout");
      return response.data;
    } catch (error) {
      console.log(error.response.status);
      if (error.response.status === 401) {
        try {
          await dispatch(refreshUserToken());

          const retryResponse = await dispatch(logoutUser());
          return retryResponse;
        } catch (refreshError) {
          return rejectWithValue(refreshError.message);
        }
      } else {
        return rejectWithValue(error.message);
      }
    }
  }
);

export const refreshUserToken = createAsyncThunk(
  "users/refreshUserToken",
  async (_, { rejectWithValue }) => {
    try {
      const response = await axiosInstance.post("/users/refresh-token");
      console.log("refreshToken->", response.data);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.message);
    }
  }
);

const initialState = {
  user: {},
  status: "idle",
  error: null,
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(logoutUser.pending, (state, action) => {
        state.status = "loading";
      })
      .addCase(logoutUser.fulfilled, (state, action) => {
        state.status = "success";
        console.log("case f logout->", action.payload); // log statement
        state.user = {};
      })
      .addCase(logoutUser.rejected, (state, action) => {
        state.error = action.payload;
      })
      .addCase(refreshUserToken.pending, (state, action) => {
        state.status = "loading";
      })
      .addCase(refreshUserToken.fulfilled, (state, action) => {
        state.status = "success";
        console.log("case f refreshToken->", action.payload); // log statement
      })
      .addCase(refreshUserToken.rejected, (state, action) => {
        state.error = action.payload;
      });
  },
});

export const getUserState = (state) => state.user.status;
export const getUserError = (state) => state.user.error;
export const getUser = (state) => state.user.user;

export const {} = userSlice.actions;

export default userSlice.reducer;

下面是我的axios实例.

const axiosInstance = axios.create({
    baseURL: "http://localhost:8082/api",
    withCredentials: true
});

我是Redux-Tools的新手,所以我很困惑.在logoutUser cThunk中,我正在判断收到的错误代码是否为401(访问令牌已过期),然后我通过调用logoutUser thunk中的refreshUserToken thunk来请求刷新令牌,但这导致logoutThunk运行两次. 我该如何纠正这个问题?或者有更好的方法来处理使用DelivercThunks刷新 token ?

注意:我使用cookie来发送和接收来自服务器的访问和刷新令牌.

推荐答案

您可以重新调用just端点,而不是重新调度运行Thunk动作at leastlogoutUser动作一次.

示例:

export const logoutUser = createAsyncThunk(
  "users/logoutUser",
  async (_, { rejectWithValue, dispatch }) => {
    try {
      const { data } = await axiosInstance.post("/users/logout");
      return data;
    } catch(error) {
      console.log(error.response.status);
      if (error.response.status === 401) {
        try {
          // Attempt token refresh, unwrap result
          await dispatch(refreshUserToken()).unwrap();

          // Retry original request
          const { data } = await axiosInstance.request(error.config);;
          return data;
        } catch(refreshError) {
          return rejectWithValue(refreshError.message);
        }
      } else {
        return rejectWithValue(error.message);
      }
    }
  }
);

为了避免到处实施这种再试行为,您可以try 使用响应拦截器来抽象和处理再试逻辑.

示例:

axiosInstance.js

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8082/api',
  withCredentials: true,
});

export default axiosInstance;

userSlice.js

export const logoutUser = createAsyncThunk(
  "users/logoutUser",
  async (_, { rejectWithValue }) => {
    try {
      const { data } = await axiosInstance.post("/users/logout");
      return data;
    } catch(error) {
      return rejectWithValue(error.message);
    }
  }
);

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux';

import App from './App.jsx'
import axiosInstance from './utils/axiosInstance';
import { store } from './app/store';
import { refreshUserToken } from './features/userSlice';

// Setup response interceptors for auth retry/token refresh
axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response.status === 401) {
      // Attempt token refresh, unwrap result
      await store.dispatch(refreshUserToken()).unwrap();

      // Retry original request
      return axiosInstance.request(error.config);
    }
    return Promise.reject(error);
  }
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
);

Javascript相关问答推荐

React状态变量在使用++前置更新时引发错误

调用SEARCH函数后,程序不会结束

React对话框模式在用户单击预期按钮之前出现

*ngFor和@代表输入decorator 和选角闭合

zoom svg以适应圆

模块与独立组件

Angular 17—每当一个布尔变量变为真时触发循环轮询,只要它保持为真

在网页上添加谷歌亵渎词

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

用于编辑CSS样式的Java脚本

使用Google API无法进行Web抓取

为什么123[';toString';].long返回1?

使用js构造一个html<;ath&>元素并不能使其正确呈现

如何在Svelte中从一个codec函数中调用error()?

扩展类型的联合被解析为基类型

为什么客户端没有收到来自服务器的响应消息?

未捕获语法错误:Hello World中的令牌无效或意外

在Vercel中部署Next.js项目时获取`ReferenceError:未定义文档`

如何根据输入数量正确显示alert ?

为什么NULL不能在构造函数的.Prototype中工作