uni 登录token方法_封装uni-app的需要token的请求

最新推荐文章于 2024-07-09 11:43:02 发布
最新推荐文章于 2024-07-09 11:43:02 发布
阅读量3.3k 收藏
点赞数
文章标签： uni 登录token方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42132352/article/details/112835068
版权
该博客介绍了如何在uni-app中封装一个带有token的请求方法。通过在`config.js`中定义`baseRequest`函数，检查本地存储的`userToken`，并将token添加到请求头中。当需要使用此功能时，在页面中导入并调用这个方法，如在`getUserStatus`函数中进行POST请求，成功后处理用户状态并存储。
摘要由CSDN通过智能技术生成

config.js

const app = {

apiUrl: 'http://216:18080/webcase/', //请求的地址

baseRequest(obj) {

try {

const userToken = uni.getStorageSync('userToken');

if (userToken) {

if (obj.header) {

obj.header["token"] = userToken;

} else {

obj.header = { "token": userToken };

}

obj.url = this.apiUrl + obj.url;

uni.request(obj)

}

else{

console.log("获取不到userToken")

}

} catch (e) {

console.log(e)

console.log("获取不到userToken")

}

},

}

export default app;

需要使用的页面

import app from "@/api/apiConfig"

getUserStatus() {

app.baseRequest({

url: 'getUserStatus'

最低0.47元/天 解锁文章
明天哇哈哈
关注
uni-app - 封装请求（简易）
王佳斌
11-10 2198
前言 这里封装的够基本使用，如果你想追求更好的，请使用相关库。 有时候，我们需要将请求封装起来，原因是很可能每次请求接口在 HEADS 头部携带 token，或 data 携带证书密钥（token + 字符串 + 时间戳），如果不封装起来，每次请求都需要重复来写。 代码 打开 main.js 加入以下代码： // 将 $http 挂载到 Vue 原型上，你可以在页面中直接 this.$http 调用。 // 当然你也可以放到其他 js 文件里，只不过每次使用你都需要 import。 // method
uni-app 请求拦截器
11-11
uni-app 请求拦截器
uni 登录token方法_uni-app 无痛刷新 token 方法
weixin_39881760的博客
12-19 2440
为了给用户一个流畅的体验, token 过期后需要重新请求新的 token 替换过期的 token前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token大概流程如下:1.用户登录之后,后端会返回两个 token ,分别为accessToken 和refreshToken 存储到Storage平时请求数据时,请求头使用accessTo...
uniapp请求封装无感刷新token
最新发布
qq_68783657的博客
07-09 293
使用方式，不同的请求头可以在contentType 设置。文件位置，根据自己需要。
uni 登录token方法_封装uni-app的需要openid或者token的请求
weixin_39520775的博客
12-19 998
1.用户第一次登录的时候就把返回的openid存到缓存里面getuserinfo(e) {var that = thisvar userinfoDetails = {}userinfoDetails = e.detail.userInfouni.getUserInfo({provider: 'weixin',success: function () {uni.login({success:func...
uni 登录token方法_封装uni-app的须要token的要求
weixin_39935388的博客
12-19 424
config.jsconst app = {apiUrl: 'http://216:18080/webcase/', //要求的地点baseRequest(obj) {try {const userToken = uni.getStorageSync('userToken');if (userToken) {if (obj.header) {obj.header["token"] = userTo...
uniapp 封装请求接口 （带token）
m0_53398323的博客
12-29 1817
【代码】uniapp 封装请求接口 （带token）
js定义全局变量_uni-app 全局变量实现的4种方式
weixin_39608988的博客
11-25 1010
点击右上方红色按钮关注“web秀”，让你真正秀起来一、公用模块定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。注意：这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。示例如下：在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 base.js 用于定义公用的方法。const websiteUrl = 'h...
uni-app封装请求完成示例项目
11-02
【uni-app封装请求完成示例项目】是一个专为uni-app框架设计的实用示例，旨在帮助开发者更高效地处理网络请求。uni-app是一款基于Vue.js开发的多端框架，能够一次编写，多端运行，覆盖H5、小程序、App等平台。在实际...
Android uni-app 封装原生插件 -.pdf
11-09
在uni-app的页面加载时，调用封装好的原生插件初始化SDK，通常需要提供API Key、Token等信息。 2. **建立连接** 当用户点击“发起通话”按钮时，通过原生插件连接到anyRTC的服务器，并请求建立音视频通话。 3. *...
手机app端扫描二维码登录web端的解决方法，前后端分离，uniapp，基于token
hehe_www2012的博客
05-15 4354
1.首先使用uniapp编写一个简单可以扫码的安卓app，其中需要登录的操作与web端可以使用同一个登录接口，且在手机端登录成功后，必须将得到的token进行保存，如先使用uni.request发送登录，然后得到服务端发送来的token，进行保存，可看一下：重要的是保存 token login() { uni.request({ url: "xxx", method: "POST", data:this.loginForm, success: .
【uniapp】request请求函数封装，token、成功、失败等
string佳佳的博客
04-16 1087
【代码】【uniapp】request请求函数封装，token、成功、失败等。
uni-app 微信/头条小程序/手机号登陆
u013108813的博客
03-07 1321
uni-app 微信、头条小程序登陆
uni-app 保存和获取 token
单飞吧的博客
01-11 1万+
使用 uni-app 提供的数据缓存 api uni.setStorageSync(‘token’, ‘res.data.data’); 保存token login() { uni.request({ url:this.apiUrl+"api/index/login", method:'POST', // 传参 data:{ telphone:this.telphone, password:this.password }, success:(res)=> {
uni-app请求头中携带token
热门推荐
qq_45959912的博客
01-28 2万+
之前做一个前后端分离项目是，用axios进行交互，访问一些有权限的页面时，需要在请求头中携带token值，在uniapp用uni.request发送请求时我发现浏览器中请求头中并没有携带token，有些有权限的页面也无法加载出来。 也找了很多解决方法，基本都是大同小异，发现和我的不太一样，于是就自己弄了一个 首先： 在登陆成功之后，需要把token保存到本地 然后新建一个request.js文件 我是这样配置的 const BASE_URL = 'http://127.0.0.1:8088'//接口地址
请求头加token的两种方法（uniapp）
qq_63943166的博客
03-16 2461
请求头加token的两种方法（uniapp）
uniapp 头部设置公共token（确保新增页面不重复提交--每一次新增都获取一次token,后端根据token判断是否有重复，有重复提交后台给提示错误）
m0_65730686的博客
02-26 972
uniapp 头部设置公共token（确保新增页面不重复提交--每一次新增都获取一次token,后端根据token判断是否有重复，有重复提交后台给提示错误）
UNI-APP_uni-app封装token方法,uni-app本地存储封装
happy81997的博客
07-13 2713
setStorageSync和setStorage的区别 以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。 通俗点说,异步就是不管保没保存成功,程序都会继续往下执行.同步是等保存成功了,才会执行下面的代码.使用异步,性能会更好;而使用同步,数据会更安全。 它们都是将数据存储在本地缓存指定的key中，单个key最大数据长度为 1MB，所有数据存储上限为 10MB 在使用setStorageSync和setStorage的时发现
uniapp对接口的封装(判断是否携带token)
lijinghai的博客
08-11 1671
uniapp对接口的封装(判断身份携带token) 先在跟目录下创建utils文件夹存放接口工具类，再在改文件夹下创建myRequest.js // 异步请求接口封装 const baseUrl = 'http://localhost:1015'; // 不带token请求 export const httpRequest = (opts, data) => { uni.onNetworkStatusChange(function(res) { if (!res.isConnected)
uni-app接口封装
09-06
在uni-app中，可以通过以下步骤对接口进行封装： 1. 创建一个`utils/request.js`文件，引入`uni.request`方法，并导出`baseURL`和`request`方法。 ``` export const baseURL = '基地址' export const request = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseURL + options.url, //接口地址：前缀+方法中传入的地址 method: options.method || 'GET', //请求方法：传入的方法或者默认是“GET” data: options.data || {}, //传递参数：传入的参数或者默认传递空集合 header: { 'token': uni.getStorageSync("token") || "" //自定义请求头信息 }, success: (res) => { console.log(res, uni.getStorageSync('token')); //返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败) if (res.data.code == 1) { resolve(res.data.data) } else { if (res.data.code == 401) { uni.navigateTo({ url:'/login/login' }) uni.clearStorageSync() } reject(res.data.msg) } // 如果不满足上述判断就输出数据 }, // 这里的接口请求，如果出现问题就输出接口请求失败 fail: (err) => { console.log(err) reject(err) } }) }) } ``` 2. 在需要使用接口的地方，引入`request`方法，并进行封装。 ``` // 在uniapp中调用接口的时候，如果需要在一进页面就请求数据就放到生命周期钩子里面 onLoad() { this.$rqt.loginIn().then(res=>{ console.log(res) }) } // 如果有参数的话，可以写在loginIn方法的参数里面 // 如果需要自己请求参数，可以写到方法里面 ``` 3. 创建一个`api/index.js`文件，引入`request`方法，并编写具体的接口请求方法。 ``` import { request } from '@/utils/request.js' // 获取论坛类型 /api/forum/ftype/index export const getForumType = (page, rows) => request({ url: 'forum/ftype/index', method: 'post', data: { page, rows } }) ``` 通过以上步骤，你可以在uni-app中对接口进行封装，方便统一管理和调用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp 接口封装](https://blog.csdn.net/m0_46846526/article/details/126362687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp封装接口](https://blog.csdn.net/zhuxiaolong1234/article/details/127816166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值