如何从 django rest 框架访问 jwt 令牌到 Angular 前端

Posted 2023-03-08

【中文标题】如何从 django rest 框架访问 jwt 令牌到 Angular 前端

【英文标题】：How to access a jwt token from a django rest framework to angular frontend

【发布时间】：2021-08-06 10:13:11

【问题描述】：

我创建了一个使用 jwt 进行身份验证的 DRF api，令牌存储在一个 cookie 中。我可以通过 postman 使用令牌成功访问所有视图集。只有当我想将令牌传递给 angular 前端时，它才会成为问题相同的操作。我正在使用 django rest 框架后端和 Angular 9 前端。还请注意，我将令牌存储在 cookie 中。

我的意见.py

class LoginView(APIView):
    
    def post(self,request):
        #getting the inputs from frontend/postman
        email =request.data['email']
        password =request.data['password']
        
        user=User.objects.filter(email=email).first()
        #Authentication
        if user is None:
            raise AuthenticationFailed('User not found!')

        if user.password!=password :
            raise AuthenticationFailed("incorrect password")

        payload = 
            'id':user.id,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=10),
            'iat': datetime.datetime.utcnow()
        

        token = jwt.encode(payload, 'secret', algorithm='HS256')
        
        response = Response()
        #storing the token in a cookie
        response.set_cookie(key='jwt',value=token ,httponly=True)
        response.data = 
            'jwt':token
        
        return response

class UserView(APIView):
    def get(self,request):
        token=request.COOKIES.get('jwt')
        
        if not token:
            raise AuthenticationFailed("unauthorised")
        
        try:
            payload =jwt.decode(token, 'secret', algorithms=['HS256'])
        except jwt.ExpiredSignatureError:
            raise AuthenticationFailed("session expired")

        user=User.objects.get(id=payload['id'])
        
        serializer=UserSerializer(user)
        return Response(serializer.data)

class Update(APIView):
      def get_object(self,request):
            try:
                token=request.COOKIES.get('jwt')
                
                if not token:
                    raise AuthenticationFailed("unauthorised")
                
                try:
                    payload =jwt.decode(token, 'secret', algorithms=['HS256'])
                except jwt.ExpiredSignatureError:
                    raise AuthenticationFailed("session expired")

                user=User.objects.get(id=payload['id'])
                
                return user

            except User.DoesNotExist:
                return Response("wakadhakwa",status=status.HTTP_204_NO_CONTENT)

      def get(self,request):
            obj=self.get_object(request)
            serializer=UserSerializer(obj)
            return Response(serializer.data)


      def put(self,request):
        
        obj=self.get_object(request)
        serializer=UserSerializer(obj,data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data)
        return Response("corrupted data",status=status.HTTP_204_NO_CONTENT)

      def delete(self,request):
        all=self.get_object(request)  
        all.delete()
        return Response(status=status.HTTP_204_NO_CONTENT)

【参考方案1】：

在收到登录响应时，您是否检查过 cookie 是否正确保存在浏览器中？

您是通过 AJAX 调用从 Angular 应用程序调用 UserView 端点，还是重新加载页面？如果是来自应用程序的调用，请确保请求发送 cookie。这取决于您请求数据的准确程度，例如如果您使用 fetch，请确保您设置了选项 credentials: 'include'。如果您以其他方式请求数据，请尝试在文档中查找用于启用发送凭据 (cookie) 的选项。

【讨论】：

我正在使用 ``` this.dataService.login(this.form.value).subscribe((res)=> localStorage.setItem("token",res.jwt) ` ` 将令牌存储在本地存储中

这将令牌设置在本地存储中，但您也设置在 cookie 中，并且在您的端点中您从 cookie 中读取它，因此将其设置在本地存储中是多余的。你能显示你用来调用的 Angular 代码吗？ UserView.get?