uni-app小程序无感登录逻辑实现

封装请求，此处只是demo

// request.js
function post(url，data) {return new Promise((resolve, reject) => {uni.request({url,data,success: res => {if (res.code === 99) {// 登录过期// 跳转到首页uni.reLaunch({URL: '/pages/index/index'})} else {resolve(res)}}})})
}

封装登录接口（demo）

// login.js
export async function myLogin() {return new Promise(() => {uni.login({code,success: res => {// 调服务端登录const result = await post('/login', {code: res.code})// 登录后把token存到本地缓存uni.setStorageSync('token', result.token)// 更新vuex中的登录状态store.commit('setIsLogin', true)resolve(result)}})})
}

调用

// App.vue
onLaunch() {this.init()
},
async init() {if (uni.getStorageSync('token')) {// 如果本地有token，不调登录，继续执行其他逻辑} else {// 调登录await myLogin()init()}
}
// home.vue
import { mapGetters } from 'vuex'
export default {computed: {...mapGetters(['isLoginGetters']),isLogin() {return this.isLoginGetters}},watch: {// 由于小程序没有一套完善的路由机制，开发者无法拦截小程序启动后进入页面的行为，可能会进入页面后，还没有拿到全局登录状态，所以需要监听isLogin: {handler(newVal, oldVal) {if (newVal) {// 登录成功后再继续执行当前页面其他业务逻辑}},immediate: true}}
}

大部分情况下，进入小程序都是到首页。如果小程序中有部分页面是从扫码或点击分享卡片直接进来（例如店铺详情页），就需要执行以上监听登录态的逻辑。
需求：登录过期的处理优化

回到步骤1

uni.reLaunch({url: ‘/pages/index/index’})

这句代码会在任何情况下、只要登录过期都跳转到首页，如果不想跳转，而是在当前页面无感重新登录后，继续当前页面的请求，那该怎么做呢？

思路1：在封装的请求方法中维护一个请求过期的队列，重新登录后再依次从队列中取出来调用，但是调用完后应该如何继续执行原本页面上请求回调后的代码呢？

思路2：登录过期时通过uni.getLaunchOptionsSync()得到path和query参数，然后传给reLaunch方法，但是这样需要判断小程序是正常点击跳转进入当前页面，还是通过分享或者扫码进入，并且会有一个跳转页面的动作，体验不好。

思路3：在需要处理的页面onLoad或者onShow回调中通过getCurrentPages()拿到当前页面对象，并放到vuex中，在登录过期时调用页面对象的onLoad方法，并传入启动参数，代码如下：
```
// store/index.js
state: {currentPage: null
}
mutations: {setCurrentPage(state, currentPage) {state.currentPage = currentPage}
}
// 店铺详情页面 /pages/store/index
export default {methods: {...mapMutations(['setCurrentPage']),onShow() {const pages = getCurrentPages()this.setCurrentPage(pages[pages.length - 1])}}
}
// request.js
if (res.code === 99) {// 登录过期const launchOptions = uni.getLaunchOptionsSync()if (launchOptions.path === 'pages/store/index') {store.state.currentPage && store.state.currentPage.onLoad(launchOptions.query)} else {// 跳转到首页uni.reLaunch({URL: '/pages/index/index'})}
} else {resolve(res)
}
```
这样当接口报出token过期时，无论在哪个页面（在需要的页面获取getCurrentPages存到vuex），都可以做到无感重新登录，并且登录成功后继续页面的请求逻辑。

uni-app小程序无感登录逻辑实现相关推荐

uni.app小程序的ajax封装详细讲解
我懒得说了 //放url相同的片段 const rootUrl = ""// 示例: ajax({ url:'/api/login', param: param, method: ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
uni.app小程序失焦聚焦，表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
uni.app小程序实现跳转获取数据
式例如上图所示 (前提是点击索引获得的id与获得数据的id是一样的) 首先是获取文档的数据我用的async await来获取数据,也可以用.then方法获取数据 async onLoad() {le ...
自有App小程序第三方微信授权登录的实现
在微信小程序下,小程序登录功能一般会通过 OpenID 或 UnionID 作为唯一标识,与小程序服务的账号体系进行关联打通,完成用户账户体系的构建与设计. 如果在像支付宝小程序.百度小程序第三方平台 ...
WoShop多商户直播短视频APP小程序商城全开源无加密商城源码
WoShop多商户直播短视频APP小程序商城全开源无加密商城源码基于现场直播+购物模式,用户可以"边看边买"现场直播商城平台,全终端支持,统一管理后台,传播更强,管理更方便,支持 ...
WoShop多商户直播电商系统APP+小程序+H5全开源无加密商城源码
WoShop多商户直播电商系统APP+小程序+H5全开源无加密商城源码随着多商户直播电商系统的市场走向兴盛,不止直播电商系统的使用越来越广泛,寻求多商户直播电商系统源码的人也越来越多.但源码市场混乱 ...
uniapp使用uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能
uni.createInnerAudioContext()实现在app 小程序 h5有声书的倍速功能官网提供的api进行的开发,自我感觉没啥问题,但是在不同的端上好像有的好使有的不好使,暂时不知道啥 ...
省钱兄校园跑腿源码（公众号+APP+小程序+Android+IOS）校园跑腿社区跑腿同城跑腿任务兼职小程序uniapp前端模版
开源代码是用户端uniapp部分源码,使用hbuilder导入即可运行只提供参考学习使用!已经获得软著!不可商业使用!感谢支持 h5体验地址 h5:https://paotui.xianmxkj.c ...

uni-app小程序无感登录逻辑实现

uni-app小程序无感登录逻辑实现相关推荐

最新文章

热门文章