axios携带token封装及AsyncStorage存储token实现

旧城等待， 2022-12-11 07:54 279阅读 0赞

> **ReactNative项目中，本地存储通常使用AsyncStorage**  
> **AsyncStorage中getItem()返回一个`Promise`**  
> **在封装的Axios中，拦截请求，将本地存储中的token放进`headers`里**

OK，直接开始看实现！

#### 具体实现 ####

localStorage.js  
对AsyncStorage的简单封装，实现功能

//本地存储
    //在登录的部分，调用并把token存至本地
    export const setStringValue = async (key,value) => { 
      try { 
        await AsyncStorage.setItem(key, value)
      } catch(error) { 
        console.log(error);
      }
      console.log('Done.')
    }
    
    //从本地获取token
    export const getToken = async(key) => { 
        try { 
           return await AsyncStorage.getItem(key);
        }catch(error) { 
            console.log(error);
        }
    }

axios.js  
封装axios的文件，统一添加axios的headers  
**关键注意**：**由于AsyncStorage返回的是Promise，所以在拦截请求处理函数也要用异步函数，`async function`，并用`await` 等待Promise返回结果，再设置token**

//请求拦截处理
    axios.interceptors.request.use(async function (config) { 
    	// 在发送请求之前
    	let tokenValue = await getToken('token');
    	if(tokenValue) { 
    		config.headers['Authorization'] = tokenValue;
    	}
    	return config;
    }, function (error) { 
        return Promise.reject(error);
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app请求头中携带token

之前做一个前后端分离项目是，用axios进行交互，访问一些有权限的页面时，需要在请求头中携带token值，在uniapp用uni.request发送请求时我发现浏览器中请求头中

た入场券/ 2023年01月12日 10:10/ 0 赞/ 420 阅读

相关封装token

故心故心故心故心小故冲啊 -------------------- 文章目录封装token -------------------- 封装token

素颜马尾好姑娘i/ 2023年01月11日 01:23/ 0 赞/ 107 阅读

相关小程序ajax网络请求类封装携带token

代码 utils/request.js 请求类 token存在globalData中，默认携带，服务端判断错误时可以登录更新 / 网络

偏执的太偏执、/ 2022年12月28日 12:54/ 0 赞/ 251 阅读

相关 axios携带token封装及AsyncStorage存储token实现

> ReactNative项目中，本地存储通常使用AsyncStorage > AsyncStorage中getItem()返回一个`Promise` > 在封装的Ax

旧城等待，/ 2022年12月11日 07:54/ 0 赞/ 279 阅读

相关将cookie响应给浏览器(携带token)

将cookie响应给浏览器(携带token) CookieUtil工具类 public class CookieUtil { public

柔情只为你懂/ 2022年12月04日 08:55/ 0 赞/ 133 阅读

相关【Spring Cloud】Spring Cloud Feign 携带 Token

在 Spring Cloud 微服务架构体系中，通常使用 `Feign` 作为服务之间的通信组件，但是在某些场景下我们对某个服务做了权限拦截，例如 `Shiro` 或者 `Sp

雨点打透心脏的1/2处/ 2022年11月29日 11:46/ 0 赞/ 199 阅读

相关携带token请求返回500的坑

今天项目遇到一个棘手的问题，uniapp携带token请求返回500，但是postman测试没问题，其实postman就是内鬼！ ![在这里插入图片描述][watermar

柔情只为你懂/ 2022年11月19日 05:27/ 0 赞/ 171 阅读

相关 axios请求中添加token，Authorization中添加token

axios({ method: 'get', url: url, responseType: 'blob',

港控/mmm°/ 2022年10月16日 00:49/ 0 赞/ 206 阅读

相关 axios 全局设置 token 信息

在[上篇][Link 1]中我们学习了什么是 token，本篇介绍前端如何全局设置每次请求都带上从后端获取来的 `token` 当然不全局设置也可以，那只能在每次请求都去 `

一时失言乱红尘/ 2022年04月24日 01:46/ 0 赞/ 463 阅读

相关 vue-axios中post和get携带参数和token

get请求携带id删除某一项 this.KaTeX parse error: Expected '\}', got 'EOF' at end of input: …igns/

r囧r小猫/ 2021年10月01日 03:46/ 0 赞/ 540 阅读