I have a global axios instance used to make requests from Microsoft Graph Api. The Authorization header needs to be set with an access token, which I am doing in a useEffect in a root route like so
<code>import { graphAxios } from '../../services/azureServices'
const { data: token, isLoading } = trpc.auth.getSessionToken.useQuery()
useEffect(() => {
if(token){
graphAxios.interceptors.request.use((config) => {
config.headers.Authorization = token.access_token
return config
})
}
},[token])
</code>
<code>import { graphAxios } from '../../services/azureServices'
const { data: token, isLoading } = trpc.auth.getSessionToken.useQuery()
useEffect(() => {
if(token){
graphAxios.interceptors.request.use((config) => {
config.headers.Authorization = token.access_token
return config
})
}
},[token])
</code>
import { graphAxios } from '../../services/azureServices'
const { data: token, isLoading } = trpc.auth.getSessionToken.useQuery()
useEffect(() => {
if(token){
graphAxios.interceptors.request.use((config) => {
config.headers.Authorization = token.access_token
return config
})
}
},[token])
how can be assured in any given place in my app that the authorization header is set before making any requests? I tried setting global state but as is’s using a callback cannot be assured that the auth header was truly set