react-native axios token和jquery ajax token组件交互教程用法和心得笔记

本文详细介绍了在React Native中使用Axios和JQuery AJAX获取及使用Token的方法,包括设置请求头、POST和GET请求的示例,并强调了安全性和不同请求类型的数据格式。适用于需要进行身份验证的Web开发人员。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前写过一个react axios 交互的简单笔记,公司其他项目需要加入验证服务器,作为一个小白,便于翻看代码回忆,也是方便有需求的web开发参考,下面内容可能写的不好,也不一定很符合您的需求,不过大体的意思就是这样,存在一些问题,错误之处还请指出,大家理解万岁。如果想看看更多的axios的笔记可以去我的react-axios笔记去学习,今天这个主要说token。

验证服务器:oauth2

简而言之就是一个口令(token...类似...天王盖地虎,宝塔镇河妖..........借用了我们架构师的原话)

用一段axios-post来获取token吧!

axios.post(`${url}/connect/token`,`client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password`)

.then(res=>this.loginok(res))

.catch(err=>this.loginerr(err))

client_id

client_secret

grant_type

这三者参数问问后台就知道了,默认好的。

获取token后,后面的每次交互都需要它进行验证,所以一定要在参数里面带着它。

注意1************************************************************************************************

其实我们知道axios post方法默认content-type使用application/json那么传递到后台的将是序列化后的json字符串但是上面的client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password的数据我并没有写成json格式或者是json对象格式,这是因为我们的后台oauth2在接收数据时格式采用的是application/x-www-form-urlencoded,这样上传到后台的数据是以key-value形式进行组织的并且用&来分割,所以为了方便后台接受我直接才写成了client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password

注意2************************************************************************************************

既然我们知道axios post方法默认content-type使用application/json,我们也可以直接修改content-type格式就好了,下面开始进行如何修改content-type!在你的项目里面安装 npm intstall qs 然后将其import qs from 'qs'。在修改headers,我们就获取到了

      let username='jialin';
      let password='jialin123L';
      let data={
        client_id:'client2',
        client_secret:'secret',
        username:username,
        password:password,
        grant_type:'password'
      }
    axios.post(`${url}/connect/token`,qs.stringify(data),{headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
   }}
)
      .then(res=>console.log(res))
      .catch(err=>console.log(err))

来一个axios-post(有 token data参数)

axios.post(`${url}/api/Account/ChangePassword`,{id:this.props.loginid,password:this.state.usernewpassword},
        {
          headers:{
            Authorization: `${ this.props.token_type } ${ this.props.access_token }`
          }
        })
.then((res)=>{Alert.alert('提示',res.data.message,
                        [
                          {text: '知道了'}
                        ]
                        );})
.catch((err)=>{console.log(err.response);})

来一个axios-get(无data参数)

let access_token=this.state.access_token;
let token_type=this.state.token_type;
    axios.get(`${url}/api/account/userinfo`,
    {
      headers:{
        Authorization: `${ res.data.token_type } ${ res.data.access_token }`
      }
    })

来一个axios-get(有 token data参数)

 axios.get(`${url}/api/view/showdata?begin=${begin}&end=${end}`,
      {
         headers:{
         Authorization: `${ this.props.token_type } ${ this.props.access_token }`
      }
  })

以上是axios使用,下面我们用原生ajax-post获取token

var username="jialin";
var pass="jialin123L";
     $.ajax({
     type:'post',
      dataType:'json',
      contentType:'application/x-www-form-urlencoded',
      data:{
       client_id:"client2",
       client_secret:"secret",
       username:username,
       password:pass,
       grant_type:"password"
      },
      url:'l:'${url}/connect/token',
      beforeSend:function(XHR){
           console.log(XHR);
      },
      success:function(res){
             console.log(res);
       },
       complete:function(XHR){
                    
       },
      error:function(err){
             console.log(err(err)
      }
                
 })

注意3************************************************************************************************

其实还是原生ajax好,方,便!直接修改contenttype,一点脾气没有

************************************************************************************************

来一个ajax-get(无data参数)

$.ajax({
     type:"get",
     dataType:'json',
     url:"${url}/api/account/userinfo",
     headers:{
         Authorization:token_type+' '+access_token
     },
      success:function(res){
          console.log(res)
      },
     error:function(err){
         console.log(err);
      }
    });

来一个ajax-get(有token data参数)

                   $.ajax({
                    type:"get",
                    dataType:'json',
                    contenType:'application/json',
                    data:JSON.stringify({
                        begin:begin,
                        end:end
                    }),
                    url:"${url}/api/view/showdata",
                    headers:{
                        Authorization:token_type+' '+access_token
                    },
                    success:function(res){
                        console.log(res)
                    },
                    error:function(err){
                        console.log(err);
                    }
                });

来一个ajax-post(有token data参数)

$.ajax({
                type:"post",
                dataType:"json",
                contentType:"application/json",
                data:{
                    name:'jialin',
                    userName:'jialin',
                    employeeNumber:'110',
                    phoneNo:'12345678987'
                },
                headers:{
                    Authorization:token_type+' '+access_token
                },
                url:"url/api/account/resetpassword",
                async:false,
                success:function(datadata){
                    console.log(datadata);
                },
                error:function(errorerror){
                }
            });

来一个ajax-post(有token 无data参数)

算了,这个案例就不写了...

有的人会疑问,用get来获取token怎么样,其实绝大多数token都是post过来,因为比较安全!

 

 

### 替代 aliyun-oss-react-native 的最新方案 在现代 React Native 应用开发中,如果不想依赖 `aliyun-oss-react-native` 来实现文件上传至阿里云 OSS 功能,则可以通过原生 HTTP 请求配合阿里云 OSS 提供的签名直传技术来完成这一操作。这种方法不仅减少了对外部库的依赖,还提供了更高的灵活性可控性。 #### 使用 REST API 实现文件上传 阿里云 OSS 提供了完善的 RESTful 接口文档[^4],开发者可以直接利用这些接口构建自己的上传逻辑。具体而言,可以采用以下步骤: 1. **获取临时凭证** 为了保障安全性,通常不会直接暴露用户的 Access Key Secret Key 给前端应用。而是由后端生成一个带有时效性的 STS Token(Security Token Service),该 token 包含访问 OSS 所需的所有必要信息。 2. **构造 POST 数据结构** 根据阿里云 OSS 文档中的说明,需要准备一系列字段作为表单提交的一部分。其中包括但不限于 policy、signature、key 等重要组成部分[^5]。 3. **发起 multipart/form-data 类型请求** 最终通过 JavaScript 中的 Fetch API 或 Axios 发起一个多部分形式编码的数据传输过程即可达成目的。 ##### 示例代码展示 ```javascript // 假设已经从前端接收到所有必要的参数 function uploadToOSS(file, config) { let formData = new FormData(); Object.keys(config).forEach(key => { formData.append(key, config[key]); }); // 添加实际要上传的文件对象 formData.append('file', file); fetch('<your-upload-url>', { method: 'POST', body: formData, }).then(response => response.json()) .then(data => console.log('Success:', data)) .catch(error => console.error('Error:', error)); } ``` 此函数接收两个主要参数:一个是待发送出去的实际媒体资源;另一个则是来自后台计算所得的一组配置项集合[^6]。 --- ### 结合 Taro 框架进行多端适配 考虑到某些情况下可能希望统一管理各平台间的差异点,那么引入像 Taro 这样的框架将会是一个不错的选择。它允许可视化界面层面上做到最大程度复用的同时兼顾到了小程序以及其他环境下的特殊需求处理[^7]。 例如当项目决定采纳 Taro 后,在其中依然能沿用前述提到过的基于标准协议栈的做法来进行静态资产同步作业。与此同时得益于其内置插件机制的支持,甚至还可以更加便捷地定制属于自身的专属解决方案。 --- ### 安全性性能考量 无论采取何种途径实施最终的功能模块,都应当重视以下几个方面的因素: - 加强身份验证措施防止恶意攻击行为发生; - 对超时重试次数加以限制以免造成不必要的负担; - 在条件允许的情况下优先选用 CDN 缓存加速加载速度等等[^8]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值