时间戳

首页 > 解决方案 > 如何在本机反应中保存和获取数据到本地存储？

reactjs - 如何在本机反应中保存和获取数据到本地存储？

问题描述

首先我发布获取令牌，然后将响应保存在本地存储中，如何使用 react native 在本地存储中保存和检索令牌数据？

这是我的splashscreen.js

import { api } from '../../helpers'

const getAppToken = () => {
    const post = {
      user: 'dummy',
      secret: 'dummy'
    }

    api.post('/v1/mp/authenticate', post)
      .then(res => {
        const { Data, Message } = res.data
        if (Message === 'SUCCESS') {
          setToken('app-token', Data.token)
          navigation.replace('MainApp')
        }
      })
  }

  const setToken = async (key, value) => {
    try {
      await AsyncStorage.setItem(key, value)
    } catch (error) {
      console.log('error')
    }
  }

  useEffect(() => {
    getAppToken()
  }, [])

这是来自 helpers 目录的 api.js

import { axios, AsyncStorage } from '../../libraries'

export const api = axios.create({
  baseURL: 'dummy',
  headers: {
    'X-APP-TOKEN': 'dummy',
    'X-Requested-With': 'XMLHttpRequest',
    'content-type': 'application/merge -patch+json'
  }
})

AsyncStorage.getItem('app-token')
  .then(token => {
    api.interceptors.request.use(config => {
      config.headers = { Authorization: `Bearer${token}` }
      return config
    }, error => {
      console.log(error)
      return Promise.reject(error)
    })
})

当位于 api.js 文件中的 AsyncStorage.getItem ('app-token') 运行时，它会收到 401 响应

标签： reactjsreact-nativereact-native-androidasyncstorage

解决方案

初始页面屏幕

 axios.post('https://your_apikey', {}, {
        headers: { 'Authorization': `Basic c2hvcHBpbmdfb2F1dGhfY2xpZW50OnNob3BwaW5nX29hdXRoX3NlY3JldA==` }
    }).then(async (response) => {
        console.log(response.data.data.access_token);
        await AsyncStorage.setItem("token", response.data.data.access_token);
    }).catch((error) => {
        console.log(error);
    });

主页//我的项目如您所愿（第二个初始页面）

axios.interceptors.request.use(
        async config => {
            const token = await AsyncStorage.getItem("token")
            if (token) {
                // console.log('if condition', await AsyncStorage.getItem("token"));
                config.headers.Authorization = "Bearer " + token//pass ur token entire app once ur set
            } else {
                console.log('config');
            }
            return config
        },
        error => {
            return Promise.reject(error)
        }
    );

推荐阅读