تایپاسکریپت - Vue3 - چگونه خارج از کامپوننتها با کوکیها کار کنیم؟

من نیاز دارم از کوکیها برای ذخیره توکن دسترسی کاربر وارد شده در Vue 3 استفاده کنم. برای انجام این کار، از بسته npm 'vue-cookies' استفاده میکنم.

این بهطور بینقص داخل کامپوننتها کار میکند - اما من باید کوکیها را خارج از کامپوننتها دریافت کنم.

این فایل main.ts من در پروژه Vue 3 من است:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import VueCookies from 'vue-cookies'
import router from './router'
import App from './App.vue'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VueCookies, { expires: '15m' })

app.mount('#app')

در داخل کامپوننت «LoginItem.vue»، من قطعه کد زیر را با $cookies داخل تگ دارم:

// ...
    const $cookies = inject<VueCookies>('$cookies')
    const token = ref('')
// ...

    onMounted(() => {
      const accessToken = $cookies?.get('accessToken')
      if (accessToken) {
        token.value = accessToken
      }
    })

کد بالا با موفقیت کار میکند. اما من میخواهم یک ماژول/فایل/روش جهانی ایجاد کنم تا عملیاتهای متداول با توکن دسترسی را مدیریت کند.

پس من فایل "auth.ts" را ایجاد کردم و سعی کردم از همان منطقی که برای کامپوننت استفاده شده بود استفاده کنم، اما متأسفانه جواب نداد:

import { inject } from 'vue'
import type { VueCookies } from 'vue-cookies'

const $cookies = inject<VueCookies>('$cookies')

export const getToken = (): string => {
  return $cookies?.get('accessToken')
}

$cookie همیشه تعریف نشده است.

چطور میتوانم این را درست کنم؟

همچنین، در پارادایم Vue 3، آیا توصیه میشود مدیریت توکن دسترسی را به روشی که من تلاش میکنم انجام دهم یا باید به دنبال رویکرد دیگری باشم؟

پاسخ شماره ۱

استفاده از inject در جایی غیر از راهcاندازی مؤلفه و قلابcهای API گزینه که به طور همزمان اجرا میcشوند (created و غیره) اشتباه است. ارائه/inject به سلسله مراتب مؤلفه متکی است. هیچ راهی برای چارچوب وجود ندارد که در غیر این صورت بداند چه ارزشی باید تزریق کند.

یک مقدار میتواند مستقیماً وارد شده و به جای آن استفاده شود، provide/inject برای چند حالت خاص نیاز است، مانند تزریق وابستگی یا جلوگیری از وابستگیهای چرخشی.

میتوان اینجا مشاهده کرد که نمونه پلاگین در هیچ جای دیگری به جز نمونه برنامه در دسترس نیست، بنابراین به صورت app.$cookies در دسترس خواهد بود، میتوان از آن در ماژولهای غیرکامپوننت استفاده کرد اما ممکن است منجر به وابستگیهای گردشی شود. حل نکردن مؤثر CD منجر به برنامهای خواهد شد که در برخی محیطها قابل بستهبندی نیست. محدودیتهای CD در این مورد میتوانند با استخراج نمونه برنامه به ماژول جداگانه و عدم ارجاع به کامپوننت اصلی بلافاصله هنگام وارد کردن، کاهش یابند، به عنوان مثال app.js:

import { createApp, h } from 'vue'
export const app = createApp({ render: () => h(App) })

سپس app در main.js و ماژولهای دیگر که نیاز به دسترسی به app.$cookies دارند وارد میشود.

استفاده از فروشگاه جهانی واکنشی و نه کوکیها به عنوان منبع واحد حقیقت مفید است، یک فروشگاه میتواند با کوکیها یا ذخیرهسازی محلی همگامسازی شود. این امر میتواند به راحتی با فروشگاه Pinia و افزونه پایداری انجام شود. از آنجایی که Pinia در اینجا استفاده میشود، این روش ترجیح داده میشود. فروشگاهها میتوانند مستقیماً در هر جایی وارد شوند و از مشکلات مربوط به CD که در بالا ذکر شد، جلوگیری کنند.