react-native - 如何在 React Native 中使用访问令牌注销

Question

我正在尝试使用登录期间返回的访问令牌注销。

import React from 'react';
import { Text, Alert } from 'react-native';
import { Drawer,Container, Content, Header, Right, Button } from 'native-base';
import { FontAwesome } from '@expo/vector-icons'; 


export default class SideBar extends React.Component {
render() {
    //console.log(this.props.usertoken);
    return (
        <Container>
            <Header>
            <Right>
                <Button transparent>
                    <FontAwesome  name="close" size={24} color="#FFFFFF" onPress={() => this.props.closeDrawer()} />
                </Button>   
            </Right>
            </Header>
            <Content>
            
            <Button transparent onPress={() => Alert.alert('Log Out Button pressed')}>
                <Text style={{fontSize: 24}}>Log Out</Text>       
            </Button>  
            </Content>
        </Container>
    );
    }
    }

我已经通过“this.props.usertoken”检索了此页面中的访问令牌...任何人都可以通过将该访问令牌绑定到注销按钮来帮助我了解如何注销。

标签： react-native

Answer 1

使用 Context API 创建全局状态或使用 redux 全局存储用户数据并访问用户数据（如令牌和其他事物）来处理它。

查看更多关于全局状态的信息：

• 上下文 API https://www.smashingmagazine.com/2020/01/introduction-react-context-api/

• React Redux https://react-redux.js.org/

使用 Async storage 或 redux persist 将数据存储到应用程序重启后访问的应用程序数据中。

• 异步存储 https://react-native-async-storage.github.io/async-storage/docs/api/

• Redux 持久化 https://www.npmjs.com/package/redux-persist