@nitra/vite-boot 3.8.1 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nitra/vite-boot",
-  "version": "3.8.1",
+  "version": "4.0.1",
   "description": "Vite boot",
   "type": "module",
   "exports": {
@@ -29,6 +29,7 @@
   "dependencies": {
     "@apollo/client": "3.*",
     "@nitra/jwt-decode": "^1.2.0",
+    "@nitra/log": "^0.0.3",
     "@sentry/tracing": "^7.120.4",
     "@sentry/vue": "^10.10.0",
     "graphql-ws": "^6.0.6",

package/src/apollo.js

@@ -1,110 +1,107 @@
-import { ApolloClient, InMemoryCache, from } from '@apollo/client/core'
-import { onError } from '@apollo/client/link/error'
-import { createClient } from 'graphql-ws'
+import { ApolloClient, InMemoryCache, createHttpLink, from, split } from '@apollo/client'
+import { setContext } from '@apollo/client/link/context'
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
-import { checkToken, refreshToken, getToken } from './token.js'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { log } from '@nitra/log'
+import { createClient } from 'graphql-ws'
+import { checkToken, getToken } from './token.js'
 import { user } from './user.js'
 
+const httpLink = createHttpLink({
+  uri: `${import.meta.env.VITE_HASURA_PROTOCOL === 'wss' ? 'https' : 'http'}://${
+    import.meta.env.VITE_HASURA_HOST
+  }/v1/graphql`
+})
+
 /**
- *
- * @param options
+ * Ініціалізуємо логаут
+ * @returns {void}
  */
-function createRestartableClient(options) {
-  let restartRequested = false
-  let restart = () => {
-    restartRequested = true
+export function logout() {
+  const logoutUrl = `${import.meta.env.BASE_URL}logout`
+  // Якщо не на сторінці логауту, то перенаправляємо на сторінку логауту
+  if (globalThis.location.pathname !== logoutUrl) {
+    globalThis.location.href = logoutUrl
   }
+}
 
-  const client = createClient({
-    ...options,
-    on: {
-      ...options.on,
-      opened: socket => {
-        options.on?.opened?.(socket)
-
-        restart = () => {
-          if (socket.readyState === WebSocket.OPEN) {
-            // if the socket is still open for the restart, do the restart
-            socket.close(4205, 'Client Restart')
-          } else {
-            // otherwise the socket might've closed, indicate that you want
-            // a restart on the next opened event
-            restartRequested = true
-          }
-        }
+/**
+ *
+ * @param headers
+ * @returns {object}
+ */
+function prepareHeaders(headers = {}) {
+  const token = getToken()
 
-        // just in case you were eager to restart
-        if (restartRequested) {
-          restartRequested = false
-          restart()
-        }
-      }
-    }
-  })
+  if (!token) {
+    logout()
+  }
+  const check = checkToken(token)
 
-  return {
-    ...client,
-    restart: () => restart()
+  // Якщо роль не підходить, то перенаправляємо на сторінку логауту
+  if (check.result === 'broken-role') {
+    logout()
   }
-}
 
-export let connectionParam = {}
-export const wsClient = createRestartableClient({
-  url: `${import.meta.env.VITE_HASURA_PROTOCOL}://${import.meta.env.VITE_HASURA_HOST}/v1/graphql`,
-  connectionParams: () => {
-    const token = getToken()
+  if (check.result !== 'ok' || !user.role) {
+    logout()
+  }
 
-    if (token) {
-      const check = checkToken(token)
-      if (check.result === 'ok' && user.role) {
-        const headers = {}
-        // Якщо є токен - додаємо його в заголовки
-        headers.Authorization = `Bearer ${token}`
-        headers['x-hasura-role'] = user.role
+  headers.Authorization = `Bearer ${token}`
+  headers['x-hasura-role'] = user.role
 
-        connectionParam = { headers }
-        return connectionParam
-      }
-    }
+  return { headers }
+}
 
-    connectionParam = {}
-    return connectionParam
-  }
+// Додаємо токен і роль до кожного HTTP-запиту
+const authLink = setContext((_, { headers }) => {
+  return prepareHeaders({ ...headers })
 })
 
-const wsLink = new GraphQLWsLink(wsClient)
-
-const errorLink = onError(({ graphQLErrors, networkError }) => {
-  if (graphQLErrors) {
-    for (const err of graphQLErrors) {
-      console.error('graphQLErrors:', err)
-    }
-  }
+export const wsLink = new GraphQLWsLink(
+  createClient({
+    url: `${import.meta.env.VITE_HASURA_PROTOCOL}://${import.meta.env.VITE_HASURA_HOST}/v1/graphql`,
+    connectionParams: () => {
+      return prepareHeaders()
+    },
+    // Обробник успішного підключення
+    on: {
+      // Обробник помилок підключення
+      error: error => {
+        log.error('WebSocket помилка:', error)
+      },
 
-  if (networkError) {
-    if (networkError?.message?.match('JWTExpired')) {
-      // Запускаємо рефреш токену асинхронно
-      // Чистимо токен
-      refreshToken()
+      // Обробник закриття з'єднання
+      closed: event => {
+        log.info('WebSocket закрито:', event.code, event.reason)
 
-      // Пока спробуємо без логауту
-      // бо робить його не тільки в випадкі коли роль не підходить
+        // Коди помилок аутентифікації
+        if (event.code === 4401) {
+          log.error('Неавторизований: неправильний токен')
+        } else if (event.code === 4403) {
+          log.error('Заборонено: недостатньо прав')
+        }
+      }
+    },
+    lazy: true, // відкрити сокет тільки при першій subscription
+    lazyCloseTimeout: 15_000, // дочекатися 15 с після останньої відписки і лише тоді закрити сокет
+    keepAlive: 10_000, // ping кожні 10 с, щоб тримати з’єднання живим
+    retryAttempts: Infinity // автоперепідключення без ліміту
+  })
+)
 
-      // } else if (networkError?.message === `Invalid message 'type' property "connection_error"`) {
-      //   // Роль не підходить хашурі
-      //   router.push('/logout')
-    } else {
-      console.log(`[Network error]:`, networkError?.message, networkError)
-    }
-  }
-})
+// Розділяємо трафік: subscription -> WS, інше -> HTTP
+const link = split(
+  ({ query }) => {
+    const def = getMainDefinition(query)
+    return def.kind === 'OperationDefinition' && def.operation === 'subscription'
+  },
+  wsLink,
+  from([authLink, httpLink])
+)
 
+// Ініціалізуємо клієнт
 export const apolloClient = new ApolloClient({
-  link: from([errorLink, wsLink]),
-  cache: new InMemoryCache(),
-  defaultOptions: {
-    watchQuery: {
-      fetchPolicy: 'cache-and-network'
-    }
-  }
+  link,
+  cache: new InMemoryCache()
 })

package/src/login.js

@@ -1,4 +1,4 @@
-import { getToken, checkToken } from './token.js'
+import { checkToken, getToken } from './token.js'
 import { setUser } from './user.js'
 // import { router } from './router.js'
 // Використовуємо глобальну версію
@@ -6,6 +6,7 @@ import { setUser } from './user.js'
 
 /**
  * Автоматичний вхід користувача
+ * @returns {Promise<void>}
  */
 export async function autoLogin() {
   const token = getToken()
@@ -34,5 +35,5 @@ export async function defaultLogin(decoded, raw) {
   setUser(decoded)
   // @ts-ignore
   const route = sessionStorage.getItem('url-before-logout') || import.meta.env.BASE_URL
-  window.location.href = route // router.push(route)
+  globalThis.location.href = route // router.push(route)
 }

package/src/router.js

@@ -14,6 +14,7 @@ export function setRouter(r) {
 /**
  *
  * @param to
+ * @returns {boolean}
  */
 export function canUserAccess(to) {
   // Якщо сторінка без обмеження по ролям то дозволяємо завжди

package/src/token.js

@@ -14,7 +14,6 @@ const allowedRoles = import.meta.env.VITE_HASURA_ROLE.split(',')
  */
 export function checkToken(token) {
   const decoded = jwtDecode(token)
-
   if (!decoded || !decoded['https://hasura.io/jwt/claims']) {
     cleanToken()
     return { result: 'cleaned' }
@@ -36,6 +35,7 @@ export function checkToken(token) {
 
 /**
  * Токен з кукі
+ * @returns {string}  токен
  */
 export function getToken() {
   // інакше з кукі
@@ -62,7 +62,7 @@ export function cleanToken() {
   localStorage.removeItem('__session')
 
   // @ts-ignore
-  document.cookie = `__session=; Max-Age=0; path=/; domain=${import.meta.env.VITE_DOMAIN}` // eslint-disable-line unicorn/no-document-cookie
+  document.cookie = `__session=; Max-Age=0; path=/; domain=${import.meta.env.VITE_DOMAIN}`
 }
 
 /**
@@ -96,9 +96,6 @@ export async function refreshToken() {
       return
     }
 
-    // Прибираємо токен, щоб інші паралельні JWTExpired не виконувались
-    // cleanToken()
-
     const response = await fetch('/auth/refresh-token', {
       method: 'POST',
       headers: {
@@ -111,23 +108,22 @@ export async function refreshToken() {
 
     // Якщо НЕ успішно отримали токен
     if (!result.token) {
-      // cleanToken()
       return
     }
 
     const check = checkToken(result.token)
     if (check.result !== 'ok') {
-      // cleanToken()
       return
     }
 
     // Якщо запущений аполо
     // допускаємо що ми всередині прикладення
-    if (window.location.pathname !== '/login' && apolloClient) {
+    if (globalThis.location.pathname !== '/login' && apolloClient) {
       setUser(check.decoded)
 
       // перезавантажуємо щоб він вступив в дію
-      wsClient.restart()
+      // wsClient.restart()
+      wsClient.close()
     } else {
       await defaultLogin(check.decoded, result.token)
     }

package/src/user.js

@@ -26,6 +26,7 @@ export function setUser(u) {
  *
  * @param a
  * @param b
+ * @returns {string[]}
  */
 function intersection(a, b) {
   const setA = new Set(a)

package/src/vite-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="vite/client" />
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}