reactjs - 尝试连接时的django csrf身份验证错误反应

Question

我正在尝试使用 django 构建后端，并使用 react 构建前端。当我尝试登录现有用户时，我偶然发现了 403 错误。一切都可以编译，但登录总是导致失败。当我检查网络选项卡时，我看到有 403 错误。

当我访问正确的身份验证信息时

在错误页面中，它说我应该在输入标签之前添加 csrf 模板标签，但我无法添加它们，因为 react 无法识别它。如果我不使用反应，错误就消失了，但我必须使用它。如果我想在反应中实现这一点，我有什么选择？

应用程序.js：

import { BrowserRouter as Router, Switch } from "react-router-dom"
import Auth, { useAuthActions } from "use-eazy-auth"
import { AuthRoute, GuestRoute } from "use-eazy-auth/routes"
import { ConfigureRj } from "react-rocketjump"
import { map } from "rxjs/operators"
import { ajax } from "rxjs/ajax"
import Login from "./pages/Login"
import AddressBook from "./pages/AddressBook"

const login = (credentials = {}) =>
  ajax({
    url: "/core/token/",
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: credentials,
  }).pipe(
    map(({ response }) => ({
      accessToken: response.access,
      refreshToken: response.refresh,
    }))
  )

const me = token =>
  ajax.getJSON("/core/me/", {
    Authorization: `Bearer ${token}`,
  })

const refresh = refreshToken =>
  ajax({
    url: "/core/token/refresh/",
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: { refresh: refreshToken },
  }).pipe(
    map(({ response }) => ({
      refreshToken,
      accessToken: response.access,
    }))
  )

function ConfigureAuth({ children }) {
  const { callAuthApiObservable } = useAuthActions()
  return (
    <ConfigureRj effectCaller={callAuthApiObservable}>{children}</ConfigureRj>
  )
}

export default function App() {
  return (
    <Auth loginCall={login} meCall={me} refreshTokenCall={refresh}>
      <ConfigureAuth>
        <Router>
          <Switch>
            <GuestRoute path="/login" redirectTo="/">
              <Login />
            </GuestRoute>
            <AuthRoute path="/" exact redirectTo="/login">
              <AddressBook />
            </AuthRoute>
          </Switch>
        </Router>
      </ConfigureAuth>
    </Auth>
  )
}

登录.js：

import { useEffect, useState } from "react"
import { useAuthActions, useAuthState } from "use-eazy-auth"

export default function Login() {
  const { loginLoading, loginError } = useAuthState()
  const { login, clearLoginError } = useAuthActions()

  // Clear login error when Login component unmount
  useEffect(() => () => clearLoginError(), [clearLoginError])

  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

  return (
    <form
      className="row mt-5 p-2"
      onSubmit={e => {
        e.preventDefault()
        if (username !== "" && password !== "") {
          login({ username, password })
        }
      }}
    >
      <div className="col-md-4 offset-md-4">
        <div className="mb-3">
          <h1> Address Boook App</h1>
          <h2 className="mt-4">Please Log In</h2>
        </div>
        <div className="form-group">
          <input
            placeholder="@username"
            className="form-control"
            name="csrfmiddlewaretoken"
            value="pHK2CZzBB323BM2Nq7DE2sxnQoBG1jPl"
            disabled=""
            type="text"
            value={username}
            onChange={e => {
              clearLoginError()
              setUsername(e.target.value)
            }}
          />
        </div>
        <div className="form-group">
          <input
            placeholder="password"
            className="form-control"
            type="password"
            name="csrfmiddlewaretoken"
            value="pHK2CZzBB323BM2Nq7DE2sxnQoBG1jPl"
            disabled=""
            value={password}
            onChange={e => {
              clearLoginError()
              setPassword(e.target.value)
            }}
          />
        </div>
        <button className="btn btn-light" disabled={loginLoading}>
          {!loginLoading ? "Login!" : "Logged in..."}
        </button>
        {loginError && (
          <div className="alert alert-danger mt-3">
            Bad combination of username and password.
          </div>
        )}
      </div>
    </form>
  )
}

标签： reactjsdjangoauthenticationcsrfhttp-status-code-403