我正在开发一个 React Native 应用程序,该应用程序使用 JWT token 对请求进行身份验证。为此,我创建了 axios 请求和响应拦截器,将 token 添加到每个请求(请求拦截器),并在响应具有 401 HTTP 状态(响应拦截器)时将用户重定向到登录屏幕。
问题是我还没有找到在组件外部进行重定向的方法。下面的代码位于 API 服务中,每当我想要进行 API 调用时都会导入该代码。
由于此服务是无状态的并且不关心从哪个组件调用它,我需要做什么才能重定向到我的登录屏幕?
// Response interceptor
axiosInstance.interceptors.response.use(
response => {
// Do something with response data
if (response.status === 401) {
deviceStorage.removeData('token');
// TODO:
// Redirect to login page
}
return response;
},
error => {
// Do something with response error
return Promise.reject(error);
}
);
最佳答案
关注官方文档:Navigating without the navigation prop
尝试这样的事情
// App.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';
const TopLevelNavigator = createStackNavigator({ /* ... */ })
const AppContainer = createAppContainer(TopLevelNavigator);
export default class App extends React.Component {
// ...
render() {
return (
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
);
}
}
// NavigationService.js
import { NavigationActions } from 'react-navigation';
let _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigate(routeName, params) {
_navigator.dispatch(
NavigationActions.navigate({
routeName,
params,
})
);
}
// add other navigation functions that you need and export them
export default {
navigate,
setTopLevelNavigator,
};
关于reactjs - 从 React Native 中的 api 拦截器(组件外部)重定向到屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54232213/