How to get current authenticated user id using Vuejs and Django Rest?

问题

I am using Vuejs as my frontend and I would simply like to get the current logged in user's id from Django Rest and display it. How would I do this?

serializer

class CustomerSerializer(serializers.ModelSerializer):



 class Meta:
     model = Customer
     fields = '__all__'

view

class CustomerRetrieveView(generics.RetrieveAPIView):
    queryset = Customer.objects.all()
    serializer_class = CustomerSerializer


class CustomerUpdateView(generics.UpdateAPIView):
    queryset = Customer.objects.all()
    serializer_class = CreateCustomerSerializer
    permission_class = permissions.IsAuthenticatedOrReadOnly


class CustomerCreateView(generics.CreateAPIView):
    queryset = Customer.objects.all()
    serializer_class = CreateCustomerSerializer


class CustomerListView(generics.ListAPIView):
    queryset = Customer.objects.all()
    serializer_class = CustomerSerializer

url

path('customers/<int:pk>', views.CustomerRetrieveView.as_view()),
    path('customers/update/<int:pk>', views.CustomerUpdateView.as_view()),
    path('customers/all', views.CustomerListView.as_view()),
    path('customers/new', views.CustomerCreateView.as_view()),

script vue

update(event) {
     event.preventDefault();

     this.axios
    .post(`http://127.0.0.1:8000/api/v1/customers/new`, {'user': **???**, 'phone': this.phone })
    .then(response => {console.log(response) ;this.$router.push('/') })
    .catch(err => { console.error(err) })
   }

回答1:

I would suggest you look into JWT tokens. Its widely used way to provide front-end identity to a user. So, once you authenticate your user using REST call, you can get back a JWT token from the server - this value can also be stored on the server for later retrieval which is your use case. Further, for any other protected routes on your Django REST, you can use this token for authorization easily. More about this is on their documentation.

For your use case, once you authenticate a user, generate a JWT in the back end and store it on a database and return this value to the front end. (Use a POST request for this with AUTH headers - this is basic authentication for headers). After this if you want to get the user details from the back end, create a route there and request it from front end by passing the JWT token that was previously saved on your front end.

Similarly, for other routes, you can use this JWT as part of the request headers from the front end to authenticate (you can implement protected routes on your back end using this.)

Check out JWT here: https://jwt.io/.

Please let me know if this makes sense. If you do not understand feel free to ping me in the comments.

--EDIT--

More Resources

https://blog.logrocket.com/jwt-authentication-best-practices/
https://www.freecodecamp.org/news/what-are-json-web-tokens-jwt-auth-tutorial/
https://hackernoon.com/jwt-authentication-in-vue-js-and-django-rest-framework-part-1-c40c5c0d4f6e

来源：https://stackoverflow.com/questions/65548472/how-to-get-current-authenticated-user-id-using-vuejs-and-django-rest

标签

Vue.js