首先,您必须像这样为登录和注册视图创建序列化程序
from rest_framework import serializers
from django.contrib.auth.models import User
from django.contrib.auth import authenticate
# Register Serializer
class RegisterSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = ('id', 'username', 'email', 'password')
extra_kwarg = {'password':{'write_only':True}}
def create(self, validated_data):
user = User.objects.create_user(
validated_data['username'],
validated_data['email'],
validated_data['password']
)
return user
# Login Serializer
class LoginSerializer(serializers.Serializer):
username = serializers.CharField()
password = serializers.CharField()
def validate(self, data):
user = authenticate(**data)
if user and user.is_active:
return user
raise serializers.ValidationError("Incorrect Credentials")
在您的views.py 中,您必须创建这样的视图
from rest_framework import generics
from rest_framework.response import Response
from .serializers import RegisterSerializer, LoginSerializer
# Register API
class RegisterAPI(generics.GenericAPIView):
#I'm using generic view you can create your custom view
serializer_class = RegisterSerializer
def post(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
#here your data get validated and throw ValidationError to your API endpoint
user = serializer.save()
return Response({
"user":UserSerializer(user, context=self.get_serializer_context()).data})
# Login API
class LoginAPI(generics.GenericAPIView):
serializer_class = LoginSerializer
def post(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.validated_data
return Response({
"user":UserSerializer(user, context=self.get_serializer_context()).data})
并且您必须为此创建端点以将前端连接到后端
网址.py
from django.urls import path
from .api import RegisterAPI, LoginAPI
urlpatterns = [
path('api/auth/register', RegisterAPI.as_view()),
path('api/auth/login', LoginAPI.as_view()),
]
然后你必须在你的前端应用程序onSubmit或任何你想要的方法中调用一个方法
onSubmit = e => {
e.preventDefault();
const {username, email, password} = this.state; //you have to create state I've not provided because it will be to big code
const login = {name, email, password};
this.Login(login);//this method you have to create to fetch data to your endpoint and it will give you a response
this.setState({
name:'',
email:'',
password:''
});
};
从 Login 方法中,您将收到来自该响应的响应,您必须.catch()
像这样访问方法中的所有错误
.catch(err => {
const errorText = err.response.data,
const errorStatus = err.response.status
});
我认为这是很多代码,所以我将在此处停止提供更多信息,我将为您提供教程 URL。
更新
用户序列化器
class UserSerializer(serializers.ModelSerializer):
class Meta:
model = User
fields = ('id', 'username', 'email')