[英]how to fix (CSRF token missing or incorrect ) react/redux + django
i'm developing authentication我正在开发身份验证
[login_page localhost:8000/login/][1] [login_page localhost:8000/login/][1]
i tried to login but my state is LOGIN_FAIL我试图登录,但我的 state 是 LOGIN_FAIL
[LOGIN_FAIL][2] [登录失败][2]
I've checked it's working on postman and I know my template should have this code.我已经检查过它在 postman 上工作,我知道我的模板应该有这个代码。
<form method="post">{% csrf_token %}
But, If I paste this code into Login.js, it makes an error.但是,如果我将此代码粘贴到 Login.js 中,则会出错。 Like this像这样
Login.js:登录.js:
const Login = ({ login }) => {
const [formData, setFormData] = useState({
email: '',
password: ''
});
const { email , password } = formData;
const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = e => {
e.preventDefault();
login(email, password);
};
// Is the user authenticated
// Redirect them to the home page
return (
<form method="post">{% csrf_token %}
<div className="container mt-5">
{/* <h1>회원가입</h1>
<p>이메일로 회원가입</p> */}
<form onSubmit={e => onSubmit(e)}>
<div className="form-group">
<input
className="form-control"
type="email"
placeholder="이메일"
name="email"
value={email}
onChange={e => onChange(e)}
required
/>
</div>
<div className="form-group">
<input
className="form-control"
type="password"
placeholder="비밀번호"
name="password"
value={password}
onChange={e => onChange(e)}
minLength='6'
required
/>
</div>
<button className='btn btn-primary' type='submit'>login</button>
</form>
<p className='mt-3'>
<Link to='/signup'>signin</Link>
</p>
<p className='mt-3'>
<Link to='/reset_password'>find password</Link>
</p>
</div>
</form>
);
};
error code:错误代码:
Forbidden (CSRF token missing or incorrect.): /http//localhost:8000/auth/jwt/create/
[04/Feb/2021 01:33:26] "POST /http//localhost:8000/auth/jwt/create/ HTTP/1.1" 403 2513
authentication trigger code:身份验证触发代码:
export const login = (email, password) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({ email, password });
try {
const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/jwt/create/`, body, config);
dispatch ({
type: LOGIN_SUCCESS,
payload: res.data
});
dispatch (load_user());
} catch (err) {
dispatch ({
type: LOGIN_FAIL,
});
}
};
MIDDLEWARE code:中间件代码:
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
Any hint would be appreciated.任何提示将不胜感激。 [1]: https://i.stack.imgur.com/QVXfX.jpg [2]: https://i.stack.imgur.com/9mWSA.jpg [1]: https://i.stack.imgur.com/QVXfX.jpg [2]: https://i.stack.imgur.com/9mWSA.jpg
If you use redux, you can use redux-csrf package.如果你使用 redux,你可以使用 redux-csrf package。
npm install redux-csrf --save
Then you can use the setCsrfToken(token) API that set the CSRF token in the Redux store.然后您可以使用 setCsrfToken(token) API 在 Redux 存储中设置 CSRF 令牌。
Please refer here.请参考这里。enter link description here在此处输入链接描述
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.