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

旧城等待， 2022-12-11 07:54 290阅读 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 条评论，290人围观）

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

相关阅读

相关 Springboot+Axios双token解决token过期续签问题

后端分离使用token进行登录验证时，由于token存在过期时间，每次token过期都需要用户重新登录的话，用户体验很不友好。假如token能跟session一样，如果用户持续

忘是亡心i/ 2024年04月01日 17:06/ 0 赞/ 67 阅读

相关 Postman如何携带token——Bearer Token和Headers

目录一、使用场景二、设置Bearer Token 1.设置你的环境变量 2.项目集合设置认证方式及环境变量 3.登

清疚/ 2024年03月31日 08:39/ 0 赞/ 63 阅读

相关封装token

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 axios 全局设置 token 信息

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

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

相关 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 赞/ 555 阅读