How to get its value outside the component?

[InfernalAzazel]

import axios from 'axios';
import {settingsStatePersist} from "@/composables/store.ts";
import {message} from "antd";
import {subscribe} from "valtio/vanilla";

const axiosInstance = axios.create({});


subscribe(settingsStatePersist, () => {
    console.log('55')
    axiosInstance.defaults.headers = Object.assign( axiosInstance.defaults.headers || {}, {
        ...(settingsStatePersist.access_token ? { 'Authorization': `Bearer ${settingsStatePersist.access_token}` } : {}),
    })
});

axiosInstance.interceptors.request.use((config) => {

    // config.headers = Object.assign(config.headers || {}, {
    //     // 如果 access_token 存在，则设置 Authorization 头部
    //     ...(settingsStatePersist.access_token ? { 'Authorization': `Bearer ${settingsStatePersist.access_token}` } : {}),
    // })
    return config;
});


// 添加响应拦截器来处理数据和错误
axiosInstance.interceptors.response.use(
   async (response) => {
        // 处理成功响应
        return response.data;
    },
   async (error) => {
        // 处理错误

        if (error.response && error.response.status === 401) {
            settingsStatePersist.access_token = ''
            message.error(error.response.data.message);
        }else {
            message.error(error.response.data.message);
        }

        return Promise.reject(error);
    }
);

export default axiosInstance;

The effect I want to achieve

State.ts

import {ProSettings} from "@ant-design/pro-components";
import { create } from 'zustand';
import {persist} from "zustand/middleware";

const defaultSettings: Partial<ProSettings> = {
    fixSiderbar: true,
    fixedHeader: true,
    layout: 'mix',
    splitMenus: false,
    navTheme: 'light',
    contentWidth: 'Fluid',
    colorPrimary: '#1677FF',
    siderMenuType: 'sub',
};

interface AppState {
    access_token: string
    locale: string
    theme: Partial<ProSettings> | undefined
}

export const storePersist = persist((set) => ({
    access_token: '',
    locale:'zh_cn',
    theme: defaultSettings,
    setAccessToken:(new_access_token: string) =>  set((state: AppState) => ({...state, access_token: new_access_token})),
    setLocale:(newLocale: string) =>  set((state: AppState) => ({...state, locale: newLocale})),
    setTheme: (newTheme: Partial<ProSettings> | undefined) => set((state: AppState) => ({...state, theme: newTheme})),
}), {name: 'adminPro'})

export const useAppStore = create(storePersist);

request.ts

• const state = useAppStore.getState() as any

import {useAppStore} from '@/store';
import axios from 'axios';
import {PagesData} from "@/services/typings";
import {notification } from '@/components/EscapeAntd'
import i18n from 'i18next';


const axiosInstance = axios.create({});


axiosInstance.interceptors.request.use((config) => {
    const state = useAppStore.getState() as any
    config.headers = Object.assign(config.headers || {}, {
        // 如果 access_token 存在，则设置 Authorization 头部
        ...(state.access_token ? { 'Authorization': `Bearer ${state.access_token}` } : {}),
        // 如果locale存在，则设置 Customize-Language 头部
        ...(state.locale ? { 'Customize-Language': state.locale} : {}),
    })
    return config;
});


// 添加响应拦截器来处理数据和错误
axiosInstance.interceptors.response.use(
    (response) => {
        // 处理成功响应
        const data: PagesData<any> = response.data
        const state = useAppStore.getState() as any
        if(data.success){
            if(data.status_code !== 200){
                notification.info({
                    message:  i18n.t('multipurpose.info'),
                    description: data.detail,
                    duration: 3,
                })
            }
        }else {
            // 定义一个数组，包含导致访问令牌失效的HTTP状态码
            const resetTokenStatusCodes = [419, 423, 480];
            // JWT过期 用户被禁用
            // 检查返回的状态码是否需要重置访问令牌
            if (resetTokenStatusCodes.includes(data.status_code)) {
                state.setAccessToken('');
            }
            notification.error({
                message: i18n.t('multipurpose.error'),
                description: data.detail,
                duration: 3,
            });
        }

        return response.data;
    },
    (error) => {
        // 处理错误
        return Promise.reject(error);
    }
);

export default axiosInstance;

[overthemike]

I'm not sure what you're asking here. Your question was labeled how to get a value outside of a component, however there are no components in your code.

It looks like you're using zustand. Great library as well, but this is a discussion board for valtio. Did you mean to post here?

Either way, if you could provide more context for your question in either discussion group, it would be much easier to try and help you out.

[InfernalAzazel]

Thank you for your reply. What I want to ask is how to inject token into the request header.