feat: resolve conflict

README.md

@@ -2,7 +2,7 @@
 
 🚀 Boilerplate and Starter for Vue 3x, Vite, Tailwind CSS, Vue Query and TypeScript ⚡️ Made with developer experience first: Vue 3x, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, Testing Library, Commit Lint, VSCode, PostCSS, Tailwind CSS, DummyJSON.
 
-- 🚀 Pages: Sign In, Categories Page, Product Page
+- 🚀 Sign In, Categories Page, Product Page
 - ⚡ All configuration for api calling (using axios)
 - ⚡ All configuration for routing, included guards
 - 💎 Using docker for multiple env
@@ -12,6 +12,10 @@
 - 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript, Jest
 - 🦊 Husky for Git Hooks
 - 🚓 Friendly structure
+- 🚫 Lint-staged for running linters on Git staged files
+- 💡 Absolute Imports using @ prefix
+- 🎁 Auto generate route in pages folder, same as Nextjs and Nuxtjs
+- 📏 Linter with ESLint for Vue, Typescript
 
 This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
@@ -30,11 +34,11 @@ You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/
 
 ## Build app with Docker compose
 
-- To build PRODUCTION
+- To build `PRODUCTION`
   - Run `make build-production`
   - To start app `make start-production`
   - To stop container `make stop-production`
-- To build QA - For testing env
+- To build `QA - For testing env`
   - Run `make build-qa`
   - To start app `make start-qa`
   - To stop container `make stop-qa`

src/middleware/auth.ts

@@ -1,31 +1,35 @@
-import { ACCESS_TOKEN_KEY, USER_ID } from "@/utils/constants";
 import useAuthStore from "@store/auth";
+import { storeToRefs } from "pinia";
 import { RouteLocationNormalized, NavigationGuardNext } from "vue-router";
+import { ACCESS_TOKEN_KEY, USER_ID } from "@/utils/constants";
 
 export const auth = async (
   from: RouteLocationNormalized,
   to: RouteLocationNormalized,
   next: NavigationGuardNext
 ) => {
   const { getUserInfo } = useAuthStore();
-  const access_token = localStorage.getItem(ACCESS_TOKEN_KEY);
-  const userId = localStorage.getItem(USER_ID);
+  const { loggedIn } = storeToRefs(useAuthStore());
 
-  if (access_token && userId) {
-    try {
-      const user = await getUserInfo(userId);
+  if (from.meta.requiresAuth && !loggedIn.value) {
+    const access_token = localStorage.getItem(ACCESS_TOKEN_KEY);
+    const userId = localStorage.getItem(USER_ID);
 
-      if (user) {
-        next();
+    if (access_token && userId) {
+      try {
+        const user = await getUserInfo(userId);
 
-        return Promise.resolve(user);
+        if (user) {
+          next();
+        }
+      } catch (error) {
+        localStorage.removeItem(ACCESS_TOKEN_KEY);
+        next(`/login?redirect=${to.path}`);
       }
-    } catch (error) {
-      localStorage.removeItem(ACCESS_TOKEN_KEY);
+    } else {
       next(`/login?redirect=${to.path}`);
-      return Promise.reject(error);
     }
   } else {
-    next(`/login?redirect=${to.path}`);
+    next();
   }
 };

src/router/index.ts

@@ -1,9 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import { setupLayouts } from "virtual:generated-layouts";
 import generatedRoutes from "virtual:generated-pages";
-import { storeToRefs } from "pinia";
-import useAuthStore from "@/store/auth";
-import { ACCESS_TOKEN_KEY, USER_ID } from "@/utils/constants";
+import { auth } from "@/middleware";
 
 const routes = setupLayouts(generatedRoutes);
 
@@ -13,32 +11,10 @@ const router = createRouter({
   linkActiveClass: "is-active",
 });
 
-// const unAuthPages = ["login", "register", "forgot-password"];
+// const unRequiresAuthPages = ["login", "register", "forgot-password"];
 
 router.beforeEach(async (from, to, next) => {
-  const { getUserInfo } = useAuthStore();
-  const { loggedIn } = storeToRefs(useAuthStore());
-  if (from.meta.requiresAuth && !loggedIn) {
-    const access_token = localStorage.getItem(ACCESS_TOKEN_KEY);
-    const userId = localStorage.getItem(USER_ID);
-
-    if (access_token && userId) {
-      try {
-        const user = await getUserInfo(userId);
-
-        if (user) {
-          next();
-        }
-      } catch (error) {
-        localStorage.removeItem(ACCESS_TOKEN_KEY);
-        next(`/login?redirect=${to.path}`);
-      }
-    } else {
-      next(`/login?redirect=${to.path}`);
-    }
-  } else {
-    next();
-  }
+  return auth(from, to, next);
 });
 
 router.afterEach((to) => {