问题:
我已经在其中创建了一个React Native应用程序,我正在检查是否未经授权。我正在删除异步存储并重定向到登录。为了轻松处理Axios,我创建了这样的HTTP客户端文件。
import axios from "axios";
import { AsyncStorage } from "react-native";
import { Navigationactions } from 'react-navigation';
// TODO: Replace this with actual JWT token from Keycloak
axios.defaults.headers.post["Content-Type"] = "application/json";
// Create axios instance for api calls
var instance = null;
export const setauth = async () => {
const token = await AsyncStorage.getItem("jwt");
instance = axios.create({
baseURL: "",timeout: 150000,headers: {
Authorization: "Bearer " + token,"Content-Type": "application/json"
}
});
instance.interceptors.response.use(
function(response) {
return response;
},async function(error) {
console.log(error);
if (error.response.status) {
if (error.response.status === 401) {
AsyncStorage.removeItem('jwt')
AsyncStorage.removeItem("user");
Navigationactions.navigate({
routeName: 'login'
});
} else {
return error;
}
}
}
);
};
export const Get = (route,data) => {
function getData() {
return instance.get(
route,data == null ? { data: {} } : { data: JSON.stringify(data) }
);
}
if (instance) return getData();
return setauth().then(getData);
};
export const Post = (route,data) => {
function postData() {
return instance.post(route,JSON.stringify(data));
}
if (instance) return postData();
return setauth().then(postData);
};
我正在redux逻辑函数内部访问此HTTP客户端文件。因此,这不在组件之内。现在我遇到的问题是它正在删除异步存储,但是导航似乎无法正常工作。
我如何创建路线?
import React,{ Component } from "react";
import { createAppContainer } from "react-navigation";
// import { createStackNavigator } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import IonIcon from "react-native-vector-icons/Ionicons";
import { Image } from "react-native";
import LoginScreen from "./components/Login/Login";
import HomeScreen from "./components/Home/Home";
import SettingsScreen from "./components/Settings/Settings";
import FinesScreen from "./components/Fines/Fines"
import ChangePassword from "./components/Changepassword/Changepassword";
const SettingsTab = createStackNavigator(
{
settings: { screen: SettingsScreen },changePassword: { screen: ChangePassword }
},{
initialRouteName: "settings",headerMode: "none"
},(navigationOptions = {
headerMode: "none"
})
);
const TabNav = createBottomTabNavigator(
{
home: {
screen: HomeScreen,navigationOptions: {
tabBarLabel: false,tabBarIcon: () => (
<Image source={require("../assets/invalid-name.png")} />
)
}
},fines: {
screen: FinesScreen,headerMode: "none",tabBarIcon: () => (
<Image source={require("../assets/icon-service-fines.jpg")} />
)
}
},settings: {
screen: SettingsTab,tabBarIcon: () => <Image source={require("../assets/settings.png")} />
}
}
},{
tabBarPosition: "bottom",swipeEnabled: true,animationEnabled: true,tabBarOptions: {
activeTintColor: "#FFFFFF",inactiveTintColor: "#F8F8F8",borderTopColor: "transparent",style: {
backgroundColor: "#fffff",paddingTop: 0
},indicatorStyle: {
borderBottomColor: "#87B56A",borderBottomWidth: 2
},tabStyle: {
justifyContent: "center"
}
}
}
);
const MainNavigator = createStackNavigator(
{
login: { screen: LoginScreen },tab: { screen: TabNav }
},{
initialRouteName: "login",(navigationOptions = {
headerMode: "none"
})
);
const AppContainer = createAppContainer(MainNavigator);
export default AppContainer;
我像这样在app.js文件中使用了它。
import React from "react";
// import Login from "./src/components/Login/Login";
// import Register from "./src/components/Register/Register";
import Route from "./src/route";
import { Provider } from "react-redux";
import { createLogicMiddleware } from "redux-logic";
import { createStore,applyMiddleware,compose } from "redux";
import NavigationService from "./src/services/navigationService";
import reducers from "./src/reducers";
import services from "./src/services";
const logicMiddleware = createLogicMiddleware(services,{});
const middleware = applyMiddleware(logicMiddleware);
const composeEnhancers = compose;
const enhancer = composeEnhancers(middleware);
let store = createStore(reducers,enhancer);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<Route
// ref={navigatorRef => {
// NavigationService.setNavigator(navigatorRef);
// }}
></Route>
</Provider>
);
}
}
有人可以帮助我解决此问题吗?谢谢。