我正在尝试使用 django 构建后端,并使用 react 构建前端。当我尝试登录现有用户时,我偶然发现了 403 错误。一切都编译但登录总是导致失败。当我检查网络选项卡时,我看到有 403 错误。
when I access correct auth info
在错误页面中,它说我应该在输入标签之前添加 csrf 模板标签,但我无法添加它们,因为 react 无法识别它。如果我不使用反应,错误就会消失,但我必须使用它。如果我想在 React 中实现这一点,我有哪些选择?
App.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>
)
}