Об обработке нового токена доступа в MSAL Vue 3

Question

У меня есть вопрос, связанный с использованием MSAL и Vue3, о том, как написать функции для вызова защищенного API, а также я хочу получить правильный access_token, принимая во внимание, что в случае истечения срока его действия получить новый.

При настройке компонента сделайте что-то подобное

EventList.vue

          import { useMsalAuthentication } from 'src/composition-api/useMsalAuthentication';

setup() {
    const events = ref<Event[]>();
    
    const { result, acquireToken } = useMsalAuthentication(
      InteractionType.Redirect,
      loginRequest
    );
    
    const callFn = ref<number>(0);
    
    const loadEvents = async() => {
      try {
        const apiResult = await callGetApi(
          result.value.accessToken,
          'api/Event/GetPaginatedList?Unit=' +
            unitTemp +
            '&SkipCount=0&Date=' +
            date.value
        );
        
        events.value = apiResult.data.result.items;
      } catch (err: any) {
        if(error401) {
          callFn.value = 0;
          acquireToken(); // will cause result change on watcher and this function will be called again
        }else {
          showAlert(
          `Falha ao carregar eventos: ${err.response?.data.errorMessage ?? err}`
          );
        }
      }
    }
    
    // show all files that belong to an event
    const showFiles = async (evtId: number) => {
      currEvtId.value = evtId;
      try {
        const apiResult = await callGetApi(
          result.value.accessToken,
          `/api/Archive/GetUploadedArchives?eventId=${evtId}`
        );
        // process response
        apiResult.data.forEach(
          // ... some code
        );
        showFileDialog.value = true;
      } catch (err: any) {
        if(error401) {
          callFn.value = 1;
          acquireToken(); // will cause result change on watcher and this function will be called again
        }else {
          showAlert(
          `Falha ao carregar arquivos: ${
            err.response?.data.errorMessage ?? err
          }`
         );
        }
        
      }
    };
    
    // Fetch new data from the API each time the result changes (i.e. a new access token was acquired)
    watch(result, async (currentValue, oldValue) => {
      console.log("---- from watch", result.value?.accessToken/*, currentValue, oldValue*/);
      if(callFn.value === 0)
        await loadEvents();
      else if(callFn.value === 1)
          await showFiles(currEvtId.value);
    });
    
}

Мой шаблон для истечения срока действия кода токена дескриптора не очень хорош, у меня много функций в компоненте, и код становится грязным. Кто-нибудь может показать мне лучший подход?

Я попробовал перехватчик axios в ответе, однако, когда я хочу вызватьacquireToken(), я получил исключение: throw «useMsal() не может быть вызван вне функции setup() компонента»;