Merge pull request #640 from webitel/refactor/new-auth-refactor

Refactor/new auth refactor

.env

@@ -1,7 +1,7 @@
 VITE_API_URL = '/api'
 VITE_CHAT_URL = '/chat'
 
-VITE_AUTH_MODULE_URL = '/app/auth'
+VITE_AUTH_URL = '/app/auth'
 
 VITE_ADMIN_URL = '/admin'
 VITE_AGENT_URL = '/workspace'

.env.development

@@ -1,7 +1,7 @@
 VITE_API_URL = 'https://dev.webitel.com/api'
 VITE_CHAT_URL = 'chat'
 
-VITE_AUTH_MODULE_URL = 'http://dev.webitel.com/app/auth'
+VITE_AUTH_URL = 'http://dev.webitel.com/app/auth'
 
 VITE_ADMIN_URL = 'https://dev.webitel.com/admin'
 VITE_AGENT_URL = 'https://dev.webitel.com/workspace'

package.json

@@ -15,7 +15,7 @@
     "@vuelidate/validators": "^2.0.0",
     "@vueuse/core": "^10.3.0",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.4.11",
+    "@webitel/ui-sdk": "^24.4.13",
     "axios": "^1.6.5",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",

src/app/router/router.js

@@ -1,4 +1,3 @@
-import Auth from '@webitel/ui-sdk/src/modules/Userinfo/components/the-auth.vue';
 import { createRouter, createWebHistory } from 'vue-router';
 import store from '../store/store';
 import RouteNames from './_internals/RouteNames.enum';
@@ -80,7 +79,7 @@ const checkAppAccess = (to, from, next) => {
   if (hasReadAccess) {
     next();
   } else {
-    // next('/access-denied');
+    next('/access-denied');
   }
 };
 
@@ -100,11 +99,6 @@ const router = createRouter({
     return { left: 0, top: 0 };
   },
   routes: [
-    {
-      path: '/auth',
-      name: RouteNames.AUTH,
-      component: Auth,
-    },
     {
       path: '/',
       name: RouteNames.APPLICATION_HUB,
@@ -741,12 +735,18 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  if (!(to.path === '/auth')) {
-    if (!localStorage.getItem('access-token')) {
-      next('/auth');
-    }
+  if (!localStorage.getItem('access-token') && !to.query.accessToken) {
+    const desiredUrl = `${window.location.origin}${encodeURIComponent(to.fullPath)}`;
+    const authUrl = import.meta.env.VITE_AUTH_URL;
+    window.location.href = `${authUrl}?redirectTo=${desiredUrl}`;
+  } else if (to.query.accessToken) {
+    // assume that access token was set from query before app initialization in main.js
+    const newQuery = { ...to.query };
+    delete newQuery.accessToken;
+    next({ ...to, query: newQuery });
+  } else {
+    next();
   }
-  next();
 });
 
 export default router;

src/main.js

@@ -2,15 +2,16 @@ import { createApp } from 'vue';
 // dont know why but when i import dropzone css is css files, it brakes build on firefox (only build!)
 import 'vue2-dropzone/dist/vue2Dropzone.min.css';
 import './app/assets/icons/sprite';
-import ActionComponents from './app/components/actions';
-import App from './app/components/app.vue';
+import instance from './app/api/instance';
 
 /*
 Don't know why, but without this empty file import styles just breaking :/
 I suppose, it's a problem with webpack or sass/sass loader.
 I think, this issue should go on migration to Vue 3, so I left it "as is".
  */
 import './app/css/do-not-delete-me.scss';
+import ActionComponents from './app/components/actions';
+import App from './app/components/app.vue';
 import i18n from './app/locale/i18n';
 import BreakpointPlugin from './app/plugins/breakpoint';
 import './app/plugins/webitel-flow-ui';
@@ -23,7 +24,25 @@ const fetchConfig = async () => {
   return response.json();
 };
 
-const initSession = async () => store.dispatch('userinfo/OPEN_SESSION');
+const setTokenFromUrl = () => {
+  try {
+    const queryMap = window.location.search.slice(1)
+    .split('&')
+    .reduce((obj, query) => {
+      const [key, value] = query.split('=');
+      obj[key] = value;
+      return obj;
+    }, {});
+
+    if (queryMap.accessToken) {
+      localStorage.setItem('access-token', queryMap.accessToken);
+    }
+  } catch (err) {
+    console.error('Error restoring token from url', err);
+  }
+};
+
+const initSession = async () => store.dispatch('userinfo/OPEN_SESSION', { instance });
 
 const createVueInstance = () => {
   const app = createApp(App)
@@ -44,6 +63,8 @@ const createVueInstance = () => {
 (async () => {
   let config = {};
   try {
+    setTokenFromUrl();
+
     config = await fetchConfig();
     await initSession();
   } catch (err) {

src/modules/_reusable/app-header/components/app-header.vue

@@ -28,10 +28,8 @@
 <script>
 import WebitelApplications from '@webitel/ui-sdk/src/enums/WebitelApplications/WebitelApplications.enum';
 import WtDarkModeSwitcher from '@webitel/ui-sdk/src/modules/Appearance/components/wt-dark-mode-switcher.vue';
-import authAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/auth';
-import { mapGetters, mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import navMixin from '../../../../app/mixins/navMixin';
-import router from '../../../../app/router/router';
 
 export default {
   name: 'AppHeader',
@@ -96,14 +94,15 @@ export default {
   },
 
   methods: {
+    ...mapActions('userinfo', {
+      logout: 'LOGOUT',
+    }),
     settings() {
       this.$router.push('/settings');
     },
 
-    async logoutUser() {
-      await authAPI.logout();
-      // and throw user to auth page
-      return router.replace('/auth');
+    logoutUser() {
+      return this.logout();
     },
   },
 };

src/modules/userinfo/store/userinfo.js

@@ -1,20 +1,11 @@
 import WebitelApplications
   from '@webitel/ui-sdk/src/enums/WebitelApplications/WebitelApplications.enum';
-
-// register api's
-import authAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/auth';
-import userinfoAPI from '@webitel/ui-sdk/src/modules/Userinfo/api/userinfo';
 import UserinfoStoreModule
   from '@webitel/ui-sdk/src/modules/Userinfo/store/UserinfoStoreModule';
-import instance from '../../../app/api/instance';
-
 import NavigationPages
   from '../../../app/router/_internals/NavigationPages.lookup';
 import convertScope from './_internals/scripts/convertScope';
 
-authAPI.setInstance(instance);
-userinfoAPI.setInstance(instance);
-
 const state = {
   thisApp: WebitelApplications.ADMIN,
 };