我正在尝试优化我的应用程序的性能,并且正在考虑实现 axios 拦截器。
尝试这样做时,我遇到了我无法理解的问题。
这是我的 App.js 文件:
function App() {
const Stack = createStackNavigator();
const initialLoginState = {
isLoading: true,
userToken: null,
};
const loginReducer = (prevState, action) => {
switch (action.type) {
case 'RETRIEVE_TOKEN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'LOGIN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'LOGOUT':
return {
...prevState,
userToken: null,
isLoading: false,
};
}
};
const [loginState, dispatch] = useReducer(loginReducer, initialLoginState);
const authContext = useMemo(
() => ({
signIn: async (userToken) => {
await setStoredItem('token', userToken);
dispatch({type: 'LOGIN', token: userToken});
},
signOut: async () => {
await deleteStoredItem('token');
dispatch({type: 'LOGOUT'});
},
}),
[],
);
useEffect(() => {
setTimeout(async () => {
let userToken = null;
let token = await getStoredItem('token');
if (token != undefined && token.length > 0) {
userToken = token;
}
dispatch({type: 'RETRIEVE_TOKEN', token: userToken});
}, 1000);
}, []);
axios.interceptors.request.use((config) => {
console.log(
'loginState.userToken INSIDE intercetor',
loginState.userToken,
);
// request.headers.Authorization = loginState.userToken ? `Bearer ${userToken}` : '';
return config;
});
console.log('state OUTSIDE intercetor', loginState.userToken);
如您所见,我使用 useReducer react hook 进行身份验证状态管理,然后根据 loginState.userToken !== null
与否有条件地呈现路由。
我试图将 loginState.userToken
添加到拦截器(注释掉代码),然后发生了一些奇怪的事情 - 状态值似乎发生了变化,我不知道为什么。
请看下面的截图:
起初是准确的(实际令牌),但后来变为空?
我在这里遗漏了什么?
谢谢!