DRF's token authentication with Angular

Question

I'm using django for backend and Angular for frontend and DRF for making api calls. I'm making a user login system but currently the user gets logged out on refreshing the page.

For preventing this i'm using rest_framework.authtoken.models.Token for generating token's for each user and I'm returning this token in my api call but I've no idea how to use this token in Angular to keep the user logged in on refreshing the page?

Here is my code:

views.py

from django.contrib.auth.models import User
from django.http.response import JsonResponse

from rest_framework.parsers import JSONParser
from rest_framework import status
from rest_framework.authtoken.models import Token
from rest_framework.decorators import api_view

from .serializers import LoginSerializer

@api_view(['POST'])
def loginUser(request):
    if request.method == 'POST':
        user_data = JSONParser().parse(request)
        user_serializer = LoginSerializer(data=user_data)
        data = {}
        if user_serializer.is_valid():
            user = user_serializer.validated_data['user']
            try:
                uid = User.objects.get(
                    username=user['username'])
                if not uid.check_password(user['password']):
                    raise Exception
                token = Token.objects.get(user=uid)
                data['token'] = token.key
                data['response'] = 'Successful login'
                return JsonResponse(data, status=status.HTTP_202_ACCEPTED)
            except:
                data['response'] = "Username or password does not exist"
                return JsonResponse(data, status=status.HTTP_401_UNAUTHORIZED)

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { User } from '../models/user';

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private login_url = 'http://127.0.0.1:8000/login/';
  private signup_url = 'http://127.0.0.1:8000/signup/';
  private login_status: boolean = false;
  public login(user: User) {
    return this.http.post(this.login_url, JSON.stringify(user), {observe: 'response'});
  }
  public signup(user: User) {
    return this.http.post(this.signup_url, JSON.stringify(user), {observe: 'response'});
  }
  public set_login_status(status: boolean) {
    this.login_status = status;
  }
  public is_logged_in():boolean {
    return this.login_status;
  }
  constructor(private http: HttpClient) {}
}

I'm generating the token while registering the user but I'm not sure how to use it to keep the user authenticated on refreshing?

P.S. - I couldn't find any tutorial's regarding this so any tutorial links will also work.

DRF's token authentication with Angular

0 Answers