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

Posted

技术标签:

【中文标题】如何从 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?

以上是关于如何从 django rest 框架访问 jwt 令牌到 Angular 前端的主要内容,如果未能解决你的问题,请参考以下文章

在 Django REST 框架中使用 JWT 时,刷新令牌和访问令牌存储在哪里?

Django rest 框架 jwt 令牌权限

Django rest框架登录后获取JWT令牌

Django 通道 JWT 身份验证

如何在 Django 的单个 API 中获取访问令牌和刷新令牌(rest_framework_jwt)

如何知道哪个用户被分配给了令牌(JWT Django rest 框架)?