如何在 React-Native 請求中獲取用戶數據

Question

我是 React native 的新手。我正在使用 react-native 使用 redux 和 Axios 做一個項目。 在我的登錄操作中，我從 web API 獲得了一個 API 訪問令牌。 現在我想在登錄 API 請求后將該訪問令牌添加到每個 API 請求中。

HttpClient.JS

import axios from 'axios';
import { API_URL } from 'react-native-dotenv';

const client = axios.create({

 baseURL:'http://10.0.0.20:1604/api/',
  timeout: 100000,
  headers: { 'content-type': 'application/json','Access-Control-Allow-Origin': '*' },
}); 
client.interceptors.request.use(function (config) {
  console.log(config);
  return config;
});
// Custom middleware for requests (this one just logs the error).
client.interceptors.request.use(config => config, (error) => {
  console.log('Failed to make request with error:');
  console.log(error);
  return Promise.reject(error);
});

// Custom middleware for responses (this one just logs the error).
client.interceptors.response.use(response => response, (error) => {
  console.log('Request got response with error:');
  console.log(error);
  return Promise.reject(error);
});

export default client;

用戶控制器.js

import apiclient from  './HttpClient';

class UserController {
  constructor() {

  }
  login = async (email, password) =>  
    new Promise((resolve, reject) => {     
apiclient.post('/auth',{
  UserName:email,
  Password:password
})
  .then(function(response) {

    if (email === response.data.userName && response.data.jwtToken !=='') {
      setTimeout(
        () => resolve({ name: response.data.userName,userData:response.data }),
        1000,
      );
    } else {
      setTimeout(
        () => reject(new Error('Invalid Email/Password')),
        1000,
      );
    }
}).catch(function (error) {

  console.log("User Controller Error");
  console.log(error);
  reject(new Error('Unable to login at the moment'));
  /
});

    });

  logout = () => null;
}
export default new UserController();

用戶操作.js

import UserController from '../controllers/UserController';
import { bool } from 'prop-types';


export const actionTypes = {
  LOGIN: 'LOGIN',
  LOGIN_REQUEST: 'LOGIN_REQUEST',
  LOGIN_ERROR: 'LOGIN_ERROR',
  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
  LOGOUT: 'LOGOUT',
};

const loginRequest = () => ({
  type: actionTypes.LOGIN_REQUEST,
  //islogin:bool
});

const loginError = error => ({
  type: actionTypes.LOGIN_ERROR,
  error,
});

const loginSuccess = user => ({
  type: actionTypes.LOGIN_SUCCESS,
  user,
});

const logoutRequest = () => ({
  type: actionTypes.LOGOUT,
});

export const login = (email, password) => async (dispatch) => {
  dispatch(loginRequest());
  try {
    const user = await UserController.login(email, password);
    console.log("User Details:")
    console.log(user);
    dispatch(loginSuccess(user));
  } catch (error) {
    console.log("User Action");
    dispatch(loginError(error.message));
  }
};

export const logout = () => (dispatch) => {
  UserController.logout();
  dispatch(logoutRequest());
};

UserReducer.js

import { actionTypes } from '../actions/UserActions';

const initialState = {
  CurrentUser:null,
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.LOGIN_REQUEST:
      return {
        ...state,
      };
    case actionTypes.LOGIN_SUCCESS:
      return {
        ...state,
        CurrentUser: action.user,
      };
    case actionTypes.LOGOUT:
      return initialState;
    default:
      return state;
  }
};

export default userReducer;

rootReducer.js

import { combineReducers } from 'redux';
import error from './ErrorReducer';
import userAuth from './UserReducer';
import status from './StatusReducer';
import userManage from './UserManageReducer';

const rootReducer = combineReducers({
  error,
  userAuth,
  status,
  userManage

});

export default rootReducer;

IndexReducer.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { persistReducer, persistStore } from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';
import rootReducer from './RootReducer';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  blacklist: ['loading', 'error'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const rootStore = createStore(
  persistedReducer,
  applyMiddleware(thunk),
);

export const store = rootStore;

export const persist = callback => persistStore(rootStore, null, callback);

應用程序.js

import React, { useState, useEffect } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  ActivityIndicator,
} from 'react-native';
import { Provider } from 'react-redux';
import Navigation from './components/navigation';
import Colors from './helpers/Colors';
import { store, persist } from './reducers';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.white,
  },
});



  export default function App() {
    const [ready, setReady] = useState(false);

    useEffect(() => {
      persist(() => {
        setReady(true);
      });
    });
  //console.log("Test Log Message");
    const loading = (
      <View style={styles.container}>
        <ActivityIndicator />
      </View>
    );

    const loaded = (
      <Provider store={store}>
        <Navigation />
      </Provider>
    );

    return ready ? loaded : loading;
  }

如果有人可以幫助我指導將 API 令牌轉換為 HTTP clinet.js 的好方法，那就太高興了。