@nitra/vite-boot 2.2.0 → 3.0.0

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@nitra/vite-boot",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Vite boot",
   "type": "module",
   "exports": {
     "./auto-login": "./src/auto-login.js",
     "./apollo": "./src/apollo.js",
-    "./i18n": "./src/i18n.js",
     "./pinia": "./src/pinia.js",
     "./sentry": "./src/sentry.js",
     "./token": "./src/token.js"
@@ -46,8 +45,7 @@
     "@sentry/tracing": "^6.16.1",
     "@sentry/vue": "^6.16.1",
     "graphql-ws": "^5.5.5",
-    "petite-vue-i18n": "^9.2.0-beta.26",
-    "pinia": "^2.0.9",
-    "pinia-plugin-persistedstate": "^1.0.3"
+    "pinia": "^2.0.28",
+    "pinia-plugin-persistedstate": "^3.0.1"
   }
 }

package/src/apollo.js

@@ -2,72 +2,99 @@ import { ApolloClient, InMemoryCache, from } from '@apollo/client/core'
 import { onError } from '@apollo/client/link/error'
 import { createClient } from 'graphql-ws'
 import { createLogger } from '@nitra/consola'
-import { refreshToken } from './token.js'
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
-import { getToken } from './get-token.js'
+import { checkToken, refreshToken, getToken } from './token.js'
+import { user } from './user.js'
+import { router } from 'src/njs/boot/router.js'
 
 const consola = createLogger(import.meta.url)
 
-const wsClient = createClient({
+function createRestartableClient(options) {
+  let restartRequested = false
+  let restart = () => {
+    restartRequested = true
+  }
+
+  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
+          }
+        }
+
+        // just in case you were eager to restart
+        if (restartRequested) {
+          restartRequested = false
+          restart()
+        }
+      }
+    }
+  })
+
+  return {
+    ...client,
+    restart: () => restart()
+  }
+}
+
+export let connectionParam = {}
+export const wsClient = createRestartableClient({
   url: `${import.meta.env.VITE_HASURA_PROTOCOL}://${import.meta.env.VITE_HASURA_HOST}/v1/graphql`,
-  disablePong: true,
   connectionParams: () => {
     const token = getToken()
 
-    return {
-      headers: {
-        Authorization: `Bearer ${token}`,
-        'x-hasura-role': import.meta.env.VITE_HASURA_ROLE
+    if (token) {
+      const check = checkToken(token)
+      if (check.result === 'ok' && user.role) {
+        const headers = {}
+        // Якщо є токен - додаємо його в заголовки
+        headers.Authorization = `Bearer ${token}`
+        headers['x-hasura-role'] = user.role
+
+        connectionParam = { headers }
+        return connectionParam
       }
     }
+
+    connectionParam = {}
+    return connectionParam
   }
 })
 
 const wsLink = new GraphQLWsLink(wsClient)
 
-const errorLink = onError(({ graphQLErrors, networkError, _operation, _forward }) => {
+const errorLink = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors) {
     for (const err of graphQLErrors) {
       consola.debug('graphQLErrors: ', err)
-
-      // switch (err.extensions.code) {
-      //   // Apollo Server sets code to UNAUTHENTICATED
-      //   // when an AuthenticationError is thrown in a resolver
-      //   case 'UNAUTHENTICATED':
-      //     // Modify the operation context with a new token
-      //     const oldHeaders = operation.getContext().headers
-      //     operation.setContext({
-      //       headers: {
-      //         ...oldHeaders,
-      //         authorization: getNewToken()
-      //       }
-      //     })
-      //     // Retry the request, returning the new observable
-      //     return forward(operation)
-      // }
     }
   }
 
-  // To retry on network errors, we recommend the RetryLink
-  // instead of the onError link. This just logs the error.
   if (networkError) {
     if (networkError?.message?.match('JWTExpired')) {
-      //  ретрай токен
-      // и якщо цей користувач ще валідний в БД
-      // то видавати йому новий токен
-      // тобто ця перевірка універсальна
-      // не в залежності який типом авторизувався користувач
-      // а в залежності від того чи він валідний в БД
+      // Запускаємо рефреш токену асинхронно
+      // Чистимо токен
       refreshToken()
-    } else if (networkError?.message?.match('role is not in allowed roles')) {
-      window.location.replace('/logout')
+    } else if (networkError?.message === `Invalid message 'type' property "connection_error"`) {
+      // Роль не підходить хашурі
+      router.push('/logout')
     } else {
-      console.log(`[Network error]: ${networkError}`)
+      console.log(`[Network error]: `, networkError?.message, networkError)
     }
   }
 })
 
-// Create the apollo client
 export const apolloClient = new ApolloClient({
   link: from([errorLink, wsLink]),
   cache: new InMemoryCache(),

package/src/token.js

@@ -1,61 +1,102 @@
-import { createLogger } from '@nitra/consola'
+import jwtDecode from '@nitra/jwt-decode'
+import { unsetUser, setUser } from './user.js'
+import { wsClient, apolloClient } from './apollo.js'
 
-const consola = createLogger(import.meta.url)
+const allowedRoles = import.meta.env.VITE_HASURA_ROLE.split(',')
 
 /**
- * Ініціалізація Sentry
+ * Запам'ятовуємо поточну сторінку
+ * та перенаправляємо на сторінку входу
+ *
+ * @param {string} token - JWT токен
+ * @returns {{result: string, token: {}}} - Повертає результат перевірки токена
  */
-export const refreshToken = async () => {
-  try {
-    const token = localStorage.getItem('token')
+export function checkToken(token) {
+  const decoded = jwtDecode(token)
+
+  if (!decoded) {
+    cleanToken()
+    return { result: 'cleaned' }
+  }
+
+  if (!decoded['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'].some(x => allowedRoles.some(y => y === x))) {
+    // Виходимо
+    return { result: 'broken-role' }
+  }
+
+  const isExpired = !decoded || Math.floor(Date.now() / 1000) > decoded.exp
+  if (isExpired) {
+    refreshToken()
+    return { result: 'expired' }
+  }
 
-    consola.debug('token refresh', token)
+  return { result: 'ok', decoded }
+}
+
+/**
+ * Токен з кукі
+ */
+export function getToken() {
+  const cookieObj = new URLSearchParams(document.cookie.replaceAll('; ', '&')) // eslint-disable-line
+  const token = cookieObj.get('__session')
 
+  return token
+}
+
+/**
+ * Переводимо в анонімного користувача
+ */
+export function cleanToken() {
+  unsetUser()
+  document.cookie = `__session=; Max-Age=0; path=/; domain=${import.meta.env.VITE_DOMAIN}` // eslint-disable-line
+}
+
+export async function refreshToken() {
+  try {
+    const token = getToken()
+
+    // Чекаємо, можливо це паралельний JWTExpired
+    // виходимо якщо вже пішов рефреш токена від іншого запиту
     if (!token) {
-      // Чекаємо, можливо це паралельний JWTExpired
-      consola.debug('begin wait 5 sec')
-      await sleep(5000)
-      consola.debug('end wait, start logout')
-      window.location.replace('/logout')
-    } else {
-      // Прибираємо токен, щоб інші паралельні JWTExpired не виконувались
-      localStorage.removeItem('token')
-      consola.debug('token cleaned')
-
-      const response = await fetch('/refresh-token', {
-        credentials: 'include',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ token })
-      })
-      const result = await response.json()
-      consola.debug('result refresh', result)
-
-      if (result.token) {
-        // якщо токен прийшов - замінюємо його
-        localStorage.setItem('token', result.token)
-        // та перезавантажуємо щоб він вступив в дію
-
-        // Якщо ми на сторінці логіну або логауту
-        const awayFrom = ['/login', '/logout']
-        if (awayFrom.includes(window.location.pathname)) {
-          // то переводимо в корінь
-          window.location.replace('/')
-        } else {
-          window.location.reload()
-        }
-      } else {
-        // інакше вихід
-        window.location.replace('/logout')
+      return
+    }
+
+    // Прибираємо токен, щоб інші паралельні JWTExpired не виконувались
+    cleanToken()
+
+    const response = await fetch('/refresh-token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ token })
+    })
+
+    const result = await response.json()
+
+    // Якщо успішно отримали токен
+    // та запущений аполо
+    if (result.token && apolloClient) {
+      // successToken = true
+      const check = checkToken(result.token)
+      if (check.result === 'ok') {
+        setUser(check.decoded)
+
+        // перезавантажуємо щоб він вступив в дію
+        wsClient.restart()
       }
     }
   } catch (error) {
     console.error('Error:', error)
+    // } finally {
+    //   // Якщо невдача отримання токену
+    //   if (!successToken) {
+    //     // Якщо користувач не анонімний зараз
+    //     // TODO: допрацювати
+    //     if (Object.keys(connectionParam).length === 0) {
+    //       // перезавантажуємо щоб він вступив в дію як анонімний
+    //       wsClient.restart()
+    //     }
+    //   }
   }
 }
-
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}

package/src/user.js

@@ -0,0 +1,20 @@
+const allowedRoles = import.meta.env.VITE_HASURA_ROLE.split(',')
+
+export let user = {}
+
+export function unsetUser() {
+  user = {}
+}
+
+export function setUser(u) {
+  user = u
+
+  // Роль за умовчанням
+  const intersect = intersection(allowedRoles, u['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'])
+  user.role = intersect[0]
+}
+
+function intersection(a, b) {
+  const setA = new Set(a)
+  return b.filter(value => setA.has(value))
+}

package/src/auto-login.js

@@ -1,18 +0,0 @@
-import { refreshToken } from './token.js'
-import jwtDecode from '@nitra/jwt-decode'
-
-const token = localStorage.getItem('token')
-
-if (token) {
-  const tokenDecoded = jwtDecode(token)
-
-  if (
-    !tokenDecoded['https://hasura.io/jwt/claims']['x-hasura-allowed-roles'].includes(import.meta.env.VITE_HASURA_ROLE)
-  ) {
-    // Не дозволена роль поточного користувача в поточному прикладенні
-    window.location.replace('/logout')
-  } else if (tokenDecoded.exp < Math.floor(Date.now() / 1000)) {
-    // Перевіряємо чи не старий токен знаходиться в localStorage
-    await refreshToken()
-  }
-}

package/src/get-token.js

@@ -1,6 +0,0 @@
-export const getToken = () => {
-  const cookieObj = new URLSearchParams(document.cookie.replaceAll('; ', '&')) // eslint-disable-line
-  const token = cookieObj.get('jwt-auth')
-
-  return token
-}

package/src/i18n.js

@@ -1,41 +0,0 @@
-import { createI18n } from 'petite-vue-i18n'
-import { persistStore } from 'src/stores/persist.js'
-import { createLogger } from '@nitra/consola'
-
-const consola = createLogger(import.meta.url)
-
-export const i18n = createI18n({
-  locale: 'ru',
-  fallbackLocale: 'ru',
-  legacy: false
-})
-
-/**
- * Переводимо з варіанту:
- * { "индекс": "індекс" }
- * в
- * {
- *  "ru": { "индекс": "индекс" },
- *  "uk": { "индекс": "індекс" }
- * }
- *
- * @param {Object} uk
- * @returns {Object}
- */
-export const mt = uk => {
-  const ukP = { uk: uk }
-
-  ukP.ru = Object.assign({}, ...Object.keys(uk).map(key => ({ [key]: key })))
-
-  return ukP
-}
-
-export const updGlobalLocale = lang => {
-  const persist = persistStore()
-  if (lang) {
-    persist.locale = lang
-  }
-  i18n.global.locale.value = persist.locale
-}
-
-consola.debug('End i18n boot')