Login and interceptor complete

Author: Toruitas

djsr/frontend/src/axiosApi.js

@@ -12,32 +12,32 @@ const axiosInstance = axios.create({
     }
 });
 
-// axiosInstance.interceptors.response.use(
-//     response => response,
-//     error => {
-//       const originalRequest = error.config;
-//
-//       if (error.response.status === 401) {
-//           const refresh_token = localStorage.getItem('refresh_token');
-//
-//           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;
-//
-//                   return axios(originalRequest);
-//               })
-//               .catch(err => {
-//                   console.log(err)
-//               });
-//       }
-//       return Promise.reject(error);
-//   }
-// );
+axiosInstance.interceptors.response.use(
+    response => response,
+    error => {
+      const originalRequest = error.config;
+
+      if (error.response.status === 401 && error.response.statusText === "Unauthorized") {
+          const refresh_token = localStorage.getItem('refresh_token');
+
+          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;
+
+                  return axiosInstance(originalRequest);
+              })
+              .catch(err => {
+                  console.log(err)
+              });
+      }
+      return Promise.reject(error);
+  }
+);
 
 export default axiosInstance

djsr/frontend/src/components/hello.js

@@ -11,9 +11,9 @@ class Hello extends Component {
         this.getMessage = this.getMessage.bind(this)
     }
 
-    getMessage(){
+    async getMessage(){
         try {
-            let response = axiosInstance.get('/hello/');
+            let response = await axiosInstance.get('/hello/');
             const message = response.data.hello;
             this.setState({
                 message: message,
@@ -29,10 +29,7 @@ class Hello extends Component {
         // It's not the most straightforward thing to run an async method in componentDidMount
 
         // Version 1 - no async: Console.log will output something undefined.
-        const messageData1 = this.getMessage();
-        console.log("messageData1: ", JSON.stringify(messageData1, null, 4));
-
-
+        this.getMessage();
     }
 
     render(){

djsr/frontend/src/components/login.js

@@ -8,23 +8,40 @@ class Login extends Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleSubmitWThen = this.handleSubmitWThen.bind(this);
     }
 
     handleChange(event) {
         this.setState({[event.target.name]: event.target.value});
     }
 
-    handleSubmit(event) {
+    handleSubmitWThen(event){
+        event.preventDefault();
+        axiosInstance.post('/token/obtain/', {
+                username: this.state.username,
+                password: this.state.password
+            }).then(
+                result => {
+                    axiosInstance.defaults.headers['Authorization'] = "JWT " + result.data.access;
+                    localStorage.setItem('access_token', result.data.access);
+                    localStorage.setItem('refresh_token', result.data.refresh);
+                }
+        ).catch (error => {
+            throw error;
+        })
+    }
+
+    async handleSubmit(event) {
         event.preventDefault();
         try {
-            const data = axiosInstance.post('/token/obtain/', {
+            const response = await axiosInstance.post('/token/obtain/', {
                 username: this.state.username,
                 password: this.state.password
             });
-            axiosInstance.defaults.headers['Authorization'] = "JWT " + data.access;
-            localStorage.setItem('access_token', data.access);
-            localStorage.setItem('refresh_token', data.refresh);
-            return data;
+            axiosInstance.defaults.headers['Authorization'] = "JWT " + response.data.access;
+            localStorage.setItem('access_token', response.data.access);
+            localStorage.setItem('refresh_token', response.data.refresh);
+            return response;
         } catch (error) {
             throw error;
         }