/drf_vue_jwt_example

An example for starting a single page application with Django REST framework, Vue.js and JWT

Primary LanguageJavaScript

drf-vue-jwt-example

This is an example for starting a single page application separating frontend and backend. Backend is built by Django REST framework (DRF), frontend is built by Vue. The JSON Web Token (JWT) is for auth.

Recap

Backend

  • Custom user model by AbstractUser
  • Custom permissions by BasePermission
  • Handle sensitive fields when using Generic view
    • Scenario: Password filed can be used while saving user profile, cannot be shown while displaying user profile
    • Solution: Using write or read argument in ModelSerializer
  • JWT setting

Frontend

  • Handle all requests by axios interceptors
  • Redirect when token expired or no login
  • Handle JWT with Vuex to store states
  • Save states into local storage
  • Integrate backend API

Screenshot

Redirect

Save states into local storage