Finalize axiosApi changes

Author: Toruitas

djsr/djsr/settings.py

@@ -139,8 +139,8 @@
 }
 
 SIMPLE_JWT = {
-    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
-    'REFRESH_TOKEN_LIFETIME': timedelta(minutes=10),
+    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=1),
+    'REFRESH_TOKEN_LIFETIME': timedelta(minutes=2),
     'ROTATE_REFRESH_TOKENS': True,
     'BLACKLIST_AFTER_ROTATION': True,
     'ALGORITHM': 'HS256',

djsr/frontend/src/axiosApi.js

@@ -2,8 +2,10 @@
 
 import axios from 'axios'
 
+const baseURL = 'http://127.0.0.1:8000/api/'
+
 const axiosInstance = axios.create({
-    baseURL: 'http://127.0.0.1:8000/api/',
+    baseURL: baseURL,
     timeout: 5000,
     headers: {
         'Authorization': localStorage.getItem('access_token') ? "JWT " + localStorage.getItem('access_token') : null,
@@ -12,54 +14,57 @@ const axiosInstance = axios.create({
     }
 });
 
+
 axiosInstance.interceptors.response.use(
     response => response,
     error => {
-      const originalRequest = error.config;
+        const originalRequest = error.config;
 
-      if (!originalRequest._retry){
-        originalRequest._retry = true;
-        // test for token presence, no point in sending a request if token isn't present
-        if (error.response.data.code === "token_not_valid" && error.response.status === 401 && error.response.statusText === "Unauthorized") {
-            const refresh_token = localStorage.getItem('refresh_token');
+        // Prevent infinite loops early
+        if (error.response.status === 401 && originalRequest.url === baseURL+'token/refresh/') {
+            window.location.href = '/login/';
+            return Promise.reject(error);
+        }
 
-            if (refresh_token){
-                const tokenParts = JSON.parse(atob(refresh_token.split('.')[1]));
+        if (error.response.data.code === "token_not_valid" &&
+            error.response.status === 401 && 
+            error.response.statusText === "Unauthorized") 
+            {
+                const refreshToken = localStorage.getItem('refresh_token');
 
-                // exp date in token is expressed in seconds, while now() returns milliseconds:
-                const now = Math.ceil(Date.now() / 1000);
-                console.log(tokenParts.exp);
+                if (refreshToken){
+                    const tokenParts = JSON.parse(atob(refreshToken.split('.')[1]));
 
-                if (tokenParts.exp > now) {
-                    return axiosInstance
-                    .post('/token/refresh/', {refresh: refresh_token})
-                    .then((response) => {
-        
-                        localStorage.setItem('access_token', response.data.access);
-                        localStorage.setItem('refresh_token', response.data.refresh);
-        
-                        axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
-                        originalRequest.headers['Authorization'] = "JWT " + response.data.access;
+                    // exp date in token is expressed in seconds, while now() returns milliseconds:
+                    const now = Math.ceil(Date.now() / 1000);
+                    console.log(tokenParts.exp);
 
-                        console.log("Tokens refreshed.")
-        
-                        return axiosInstance(originalRequest);
-                    })
-                    .catch(err => {
-                        console.log(err)
-                    });
+                    if (tokenParts.exp > now) {
+                        return axiosInstance
+                        .post('/token/refresh/', {refresh: refreshToken})
+                        .then((response) => {
+            
+                            localStorage.setItem('access_token', response.data.access);
+                            localStorage.setItem('refresh_token', response.data.refresh);
+            
+                            axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
+                            originalRequest.headers['Authorization'] = "JWT " + response.data.access;
+            
+                            return axiosInstance(originalRequest);
+                        })
+                        .catch(err => {
+                            console.log(err)
+                        });
+                    }else{
+                        console.log("Refresh token is expired", tokenParts.exp, now);
+                        window.location.href = '/login/';
+                    }
                 }else{
-                    console.log("Refresh token is expired", tokenParts.exp, now);
+                    console.log("Refresh token not available.")
+                    window.location.href = '/login/';
                 }
-            }else{
-                console.log("Refresh token not available.")
-            }
-        }else{
-            console.log("Do other API intercepting unrelated to Token Refreshment here.")
         }
-      }else{
-          console.log("Too many retries.")
-      }
+      
 
       // specific error handling done elsewhere
       return Promise.reject(error);