Redux 工具包不记名令牌未定义

Question

Error: authorization bearer undefined 显示在浏览器上。 这是我的 这是我的 OrderScreen.js 的 useEffect 代码在这里，我试图派遣检查用户是否有价值，如果没有将他们重定向到 /login 这是登录页面。 我正在重定向到登录页面，因为使用 state 我没有获得任何价值。

const dispatch = useDispatch()
    const navigate = useNavigate()

    const { user } = useSelector((state) => state.auth)

    const { orders, isLoading, isError, message } = useSelector(
        (state) => state.orders,
    )
    useEffect(() => {
        if (isError) {
            toast.error(message)
        }

        if (!user && !user.isAdmin) {
            navigate('/login')
        }

        dispatch(getOrder())

        return () => {
            dispatch(reset())
        }
    }, [user, isError, message, dispatch, navigate])

`

这是我的 orderSlice。 对于 getOrder Function `

const initialState = {
    orders: [],
    isError: false,
    isSuccess: false,
    isLoading: false,
    message: '',
}

export const getOrder = createAsyncThunk(
    'orders/getOrder',
    async (_, thunkAPI) => {
        try {
            const token = thunkAPI.getState().auth.user.token
            return await orderService.getOrder(token)
        } catch (error) {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString()
            return thunkAPI.rejectWithValue(message)
        }
    },
)

`

这是我的 orderService.js `

const getOrder = async (token) => {
    const config = {
        headers: {
            Authorization: `Bearer ${token}`,
        },
    }

    const response = await axios.get(API_URL, config)
    return response.data
}

` 我试图从这些堆栈中解决

1. Javascript 中的授权 Bearer Token Header
2. 如何通过 header 的 header 调用 react redux 发送不记名令牌

Answer 1

您可以尝试将令牌作为 thunk function（当前为“_”）的第一个参数传递，以确保它不是未定义的。 此外，您可以使用调试器来了解全局存储的实际 state（或者只是将其记录在您的组件中）。

最后，尝试记录返回 thunkApi.getState() function 的内容。