У меня есть конечная точка для регистрации пользователей.
Я использую реагировать на мою переднюю часть проекта. Я отправляю запрос POST в конечную точку с телом json, чтобы зарегистрировать пользователя.
но возвращение Запрещено (403).
Когда я использую почтальон для проверки работоспособности, все в порядке, но с axios Это не так.
Ошибка : POST / пользователь / регистр / 403 (запрещено)
конечная точка : пользователь / регистр /
Регистрация API View:
class UserRegisterAPIView(APIView):
serializer_class = UserRegisterSerializer
permission_classes = [permissions.AllowAny]
def post(self, request, format=None, *args, **kwargs):
print(request.data)
serializer = UserRegisterSerializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.save()
user_data = serializer.validated_data
return Response(user_data)
Зарегистрировать сериализатор:
Я использовал модель по умолчанию django User
from django.contrib.auth.models import User
class UserRegisterSerializer(serializers.ModelSerializer):
password2 = serializers.CharField(
style={'input_type': 'password'})
class Meta:
model = User
fields = ["username", "email", "password", "password2"]
extra_kwargs = {
'password': {'write_only': True},
'password2': {'write_only': True}
}
def validate(self, data):
password = data.get('password')
password2 = data.pop('password2')
if len(str(password)) < 5:
raise serializers.ValidationError("Password is too short.")
if password != password2:
raise serializers.ValidationError("Passwords don't match.")
return data
def create(self, validated_data):
username = validated_data.get('username')
email = validated_data.get('email')
password = validated_data.get('password')
user = User.objects.create_user(username=username, email=email,
password=password)
if user and user.is_active:
return user
Зарегистрировать компонент:
Я импортировал действие регистрация .
Примечание: я удалил другие поля ввода, чтобы уменьшить код
export class Register extends Component {
state = {
username: '',
password: '',
password2: '',
email: '',
}
onChange = (e) => this.setState({ [e.target.name]: e.target.value })
onSubmit = (e) => {
e.preventDefault();
this.props.register(this.state)
}
render() {
return (
<div className="col-md-6 m-auto">
<div className="card card-body mt-5">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Username</label>
<input
type="text"
className="form-control"
name="username"
onChange={this.onChange}
/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">
Register
</button>
</div>
<p>
Already have an account? <Link to="/login">Login</Link>
</p>
</form>
</div>
</div>
)
}
}
export default connect(null, { register })(Register);
Действие:
export const register = ({
username,
password,
password2,
email
}) => dispatch => {
const config = {
headers: {
'Content-Type': 'application/json',
}
}
const body = JSON.stringify({
username,
password,
password2,
email
});
axios.post('/user/register/', body, config)
.then(res => {
dispatch({
type: REGISTER_SUCCESS,
payload: res.data
})
}).catch(err => {
dispatch({
type: REGISTER_FAIL,
payload: err
})
console.log(err)
})
}
Редуктор:
import { REGISTER_SUCCESS, REGISTER_FAIL } from './../actions/types';
const initialState = {
user: null,
error: null,
}
export default function (state = initialState, action) {
switch (action.type) {
case REGISTER_SUCCESS:
console.log("Register success")
return {
...state,
user: action.payload,
}
case REGISTER_FAIL:
return {
...state,
user: null,
error: action.payload
}
default: {
return state;
}
}
}