我正在开发一个使用 JWT 令牌对请求进行身份验证的 React Native 应用程序。为此,我创建了 axios 请求和响应拦截器,以将令牌添加到每个请求(请求拦截器),并在响应具有 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);
}
);
关注官方文档:不使用导航道具进行导航
尝试这样的事情
// 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,
};
不,你不需要Redux。 如果你正在使用 React Navigation,你可以这样做。 您可以从任何地方访问
https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
对于这个功能,我认为你需要使用 Redux
这是一篇简单的中型文章,描述了 redux 与 redux saga。https://medium.com/@tkssharma/understanding-redux-react-in-easiest-way-part-1-81f3209fc0e5
使用 redux-saga 作为中间件,并在 es6 中使用生成器功能的新功能
你可以这样使用:
import Component_1 from 'PATH TO IT'
import Component_2 from 'PATH TO IT'
this.state = {
status: 1
}
render(){
if(this.state.status == 1){
return( <Component_1 onChange={(value)=> this.setState({status: value}) }/> )//Point => A
}else if(this.state.status == 2){
return( <Component_2 /> )
}
这里我们使用两个组件作为一个父级的子组件,在 A 点中我们向 child 传递一个函数(称为 props),它使我们能够根据我们的工作更改 child 内部父级的状态,当状态更改时component_1将被卸载并挂载component_2(例如登录页面)。在component_1我们可以在 props 中使用该函数来更改页面,如下所示:
if (response.status === 401) {
deviceStorage.removeData('token');
// TODO:
this.props.onChange(2) // here you can redirect to that component
}