如何在RTK Query中传递用户名和密码完成身份认证

现有代码的核心问题 #

• RTK Query 的 query 配置函数仅支持接收1个参数，你定义的 (username, password) 双参数写法会导致第二个 password 永远无法正常获取，调用时传入的所有参数只会被第一个形参接收
• 登录属于数据写入类操作，不应该使用 builder.query（该方法专门设计给幂等的查询类请求使用），应该改用 builder.mutation

修正后完整代码 #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const authCheckApi = createApi({
  reducerPath: 'authCheckApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://localhost:4001',
  }),

  endpoints: (builder) => ({
    checkAuth: builder.mutation({
      // 仅接收一个参数对象，从内部解构需要的用户名、密码
      query: ({ username, password }) => ({
        url: `/user/login/`,
        method: 'POST',
        body: { email: username, password: password },
        // 额外说明：fetchBaseQuery 会自动为JSON类型的body添加对应Content-Type头，此处可以省略手动配置
      }),
    }),
  }),
});

// 导出自动生成的调用Hook，mutation对应的Hook格式为useXxxMutation
export const { useCheckAuthMutation } = authCheckApi;

组件内调用示例 #

import { useCheckAuthMutation } from './authCheckApi'

const LoginForm = () => {
  // 返回值第一个为触发登录请求的函数，第二个为请求状态对象
  const [triggerLogin, { isLoading, error, data }] = useCheckAuthMutation()

  const handleSubmit = async (e) => {
    e.preventDefault()
    const formData = {
      username: e.target.username.value,
      password: e.target.password.value
    }
    try {
      // 调用时传入包含用户名密码的对象，unwrap用于直接抛出请求错误方便捕获
      const loginRes = await triggerLogin(formData).unwrap()
      // 登录成功逻辑，例如存储token到本地存储、跳转页面等
      console.log('登录成功', loginRes)
    } catch (err) {
      // 登录失败逻辑，例如弹出错误提示
      console.error('登录失败', err)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" type="email" placeholder="请输入邮箱" required />
      <input name="password" type="password" placeholder="请输入密码" required />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '登录中...' : '登录'}
      </button>
      {error && <p style={{color: 'red'}}>登录失败，请检查账号密码是否正确</p>}
    </form>
  )
}

内容的提问来源于stack exchange，提问作者mprog44