Change request service

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mr-next-starter",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,6 +15,7 @@
     "@types/redux": "^3.6.0",
     "@types/redux-thunk": "^2.1.0",
     "axios": "^0.21.1",
+    "js-cookie": "^3.0.1",
     "next": "^12.1.1",
     "next-redux-wrapper": "^7.0.5",
     "prop-types": "^15.7.2",
@@ -29,6 +30,7 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.1",
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.37",
     "@types/styled-components": "^5.1.11",

store/request/index.ts

@@ -0,0 +1,14 @@
+import axios from 'axios';
+import { setupInterceptorsTo } from './interceptors';
+
+const request = setupInterceptorsTo(
+  axios.create({
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }),
+);
+
+export const requestWithotAuth = setupInterceptorsTo(axios.create());
+
+export default request;

store/request/interceptors.ts

@@ -0,0 +1,76 @@
+import axios, {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+} from 'axios';
+import Cookies from 'js-cookie';
+
+// import { useDispatch } from 'react-redux';
+// import { customerActions } from 'store';
+
+const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
+  const accessToken = Cookies.get('accessToken');
+  if (accessToken && accessToken !== 'null') {
+    config.headers['Authorization'] = `Bearer ${accessToken}`;
+  } else {
+    delete config.headers['Authorization'];
+  }
+
+  return config;
+};
+
+const onRequestError = (error: AxiosError): Promise<AxiosError> => {
+  return Promise.reject(error);
+};
+
+const onResponse = (response: AxiosResponse): AxiosResponse => {
+  return response;
+};
+
+const onResponseError = async (error: any): Promise<any> => {
+  // console.log('error.response:>> ', error.response);
+  // dispatch(customerActions.postTokenWebLoginFailure(errObject(error.response)));
+  if (!error.response) {
+    return {
+      status: 503,
+      data: null,
+      problem: 'Network Error',
+    };
+  }
+  if (error.response) {
+    if (error.response.status === 403) {
+      console.log('please login :>> ');
+    }
+    if (error.response.status === 401) {
+      // Access Token was expired
+      const accessToken = Cookies.get('accessToken');
+      const refreshToken = Cookies.get('refreshToken');
+
+      try {
+        const rs = await axios.post('/refresh-token-api', {
+          RefreshToken: refreshToken,
+          AccessToken: accessToken,
+        });
+
+        const { AccessToken, RefreshToken } = rs.data;
+
+        Cookies.set('accessToken', AccessToken);
+        Cookies.set('refreshToken', RefreshToken);
+
+        return rs.data;
+      } catch (_error) {
+        return Promise.reject(_error);
+      }
+    }
+  }
+  return error.response;
+};
+
+export const setupInterceptorsTo = (
+  axiosInstance: AxiosInstance,
+): AxiosInstance => {
+  axiosInstance.interceptors.request.use(onRequest, onRequestError);
+  axiosInstance.interceptors.response.use(onResponse, onResponseError);
+  return axiosInstance;
+};