React Native 访问 SecureStore

Question

我搜索了 Google 以寻找关于此问题的明确答案，但找不到。下面是我的代码。在上一个屏幕中，我已将令牌存储到 SecureStore 我现在正尝试从不同的屏幕访问它。

(async () => {
     const token = await SecureStore.getItemAsync('token');
     return token;
 })();
 

export default class App extends React.Component {
    constructor(){
        super();
        this.state = {
            data: [],
            loaded: true,
            error: null,
            token: token
        }
    }

谁能告诉我如何从 SecureStore 获取值到我在 class 中的状态？

完整代码

import React, { Component} from 'react';
import { Text, Button, ScrollView } from 'react-native';
import { globalStyles } from '../styles/global';
import * as SecureStore from 'expo-secure-store';

(async () => {
     const token = await SecureStore.getItemAsync('token');
     //console.log('token output 1 ' + token);
     return token;
 })();
 

export default class App extends React.Component {
    constructor() {
      super();
      this.state = {
        data: [],
        loaded: true,
        error: null,
        token: ""
      };
    }

baseURL = 'https://www.example.co.uk/api/auth';    

getData = (ev)=>{
    
  this.setState({loaded:false, error: null});
  let url = this.baseURL + '/list';
  let h = new Headers();
  console.log('token output 2 = ' + this.state.token);
  h.append('Authorization', 'Bearer tokenToBePutHere');
  h.append('Content-Type', 'application/json');
  h.append('X-Requested-With', 'XMLHttpRequest');    
  let req = new Request(url, {
    headers: h,
    method: 'GET'
  });
        
        fetch(req)
        .then(response=>response.json())
        .then(this.showData)
        .catch(this.badStuff)
    }
    showData = (data)=>{
        this.setState({loaded:true, data:data});
       
    }
    badStuff = (err) => {
        this.setState({loaded: true, error: err.message});
    }
    
    componentDidMount() {
        (async () => {
            const token = await SecureStore.getItemAsync('token');
            this.setState({ token });
          })();
              
      this.getData();
    }
    render() {
      return (
        <ScrollView style={globalStyles.container}>
              { !this.state.loaded && (
                  <Text>LOADING</Text>
              )}
              <Text>Your Lists Are:</Text>
             {/*} <Button title="Get Data"
                  onPress={this.getData} /> */}
              { this.state.error && (
                  <Text style={styles.err}>{this.state.error}</Text>
              )}
              { this.state.data && this.state.data.length > 0 && (
                  
            
                      this.state.data.map( data => (
                        <Text key={data.id}>
                           { data.lists.name }    

                        </Text>
                    ))
                )}
          </ScrollView>
      );
  }
}

我已经为这个屏幕添加了我的所有代码。 token Output 1 工作并输出正确的令牌 token 输出 2 不工作并且 returns 没有。

我需要在 api 调用中使用令牌，但无法将其传递到那里。

Answer 1

您可以像这样使用生命周期方法 componentDidMount 和回调：

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      loaded: true,
      error: null,
      token: ""
    };
  }
  componentDidMount() {
    SecureStore.getItemAsync("token").then(token => {
      this.setState({ token });
    });
  }
  // ...
}

使用 async/await 的相同解决方案：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      loaded: true,
      error: null,
      token: '',
    };
  }
  componentDidMount() {
    (async () => {
      const token = await SecureStore.getItemAsync('token');
      this.setState({ token });
    })();
  }
  // ...
}

解决更新的问题

如果您只需要提取请求的令牌，您甚至不需要将令牌存储在状态中。从SecureStore:

中获取后可以直接使用

componentDidMount() {
   (async () => {
      const token = await SecureStore.getItemAsync('token');
      // Your fetch code
      this.setState({loaded:false, error: null});
      let url = this.baseURL + '/list';
      let h = new Headers();
      h.append('Authorization', `Bearer ${token}`);
      h.append('Content-Type', 'application/json');
      h.append('X-Requested-With', 'XMLHttpRequest');    
      let req = new Request(url, {
       headers: h,
       method: 'GET'
      });
   
      fetch(req)
        .then(response=>response.json())
        .then(() => this.setState({loaded:true, data:data}))
        .catch(() => this.badStuff())
   })();
}

React Native 访问 SecureStore

React Native accessing SecureStore

variables

class

token

react-native