uniapp登录成功后跳回原有页面+无感刷新token

2024-05-30 11:14

本文主要是介绍uniapp登录成功后跳回原有页面+无感刷新token,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

uniapp登录成功后跳回原有页面

引言

在C端的页面场景中,我们经常会有几种情况到登录页:

  • 区分需要登录和不用登录的页面,点击需要登录才能查看的页面
  • 已经登录但是超时,用户凭证失效等原因

以上情况可以细分为两种,一种是从未登录过的,需要第一次去登录,还一种是已经登录了,但是cookie失效了,需要重新获取用户凭证,这样的话后端会将两个状态码区分,那我们前端需要根据不同的状态码进行相应的处理。

第一次登录时

当用户从未登录时,我们需要跳到登录页去登录后再返回到原有页面,这样才是正常的交互逻辑。

  1. 第一步需要先保存当前路由
// 记录路由地址
const fungoPreviousPage = () => {let routes = getCurrentPages(); // 获取当前打开过的页面路由数组let curRoute = routes[routes.length - 1].route //获取当前页面路由let curParam = routes[routes.length - 1].options; //获取路由参数// 拼接参数let param = ''for (let key in curParam) {if (!param) {param += key + '=' + curParam[key]} else {param += '&' + key + '=' + curParam[key]}}uni.setStorageSync('pageUrl', param ? `/${curRoute}?${param}` : `/${curRoute}`)
}
  1. 登录成功后判断是否有pageUrl,有就说明回到原页面
   var pageUrl = uni.getStorageSync('pageUrl')if (pageUrl) {// 如果为tabbar页面则用reLaunch跳转if (['/pages/home/index'].includes(pageUrl)) {uni.reLaunch({url: pageUrl})} else {uni.redirectTo({url: pageUrl})}//跳转后,删除url记录避免重复跳转uni.removeStorageSync('pageUrl')} else {// 如果没有默认跳转到首页uni.reLaunch({url: '/pages/home/index'})}
  1. 回到原页面后点击返回需要返回到上一层页面(排除登录页)

    这点要注意的是整个流程是首页-a-登录页-a,如果在a页面点击返回时是要到首页,则需要注意以下

    a页面跳转到登录页时需要使用uni.redirectTo跳转,登录页跳转到a页面也需要使用uni.redirectTo

    在这里插入图片描述

cookie失效

cookie失效了需要无感知更新cookie,这个时候需要先将请求的队列存起来,等刷新cookie再去调用原来的接口就行。

后端一般会在登录成功后返回两个token值,一个用来校验用户信息,一个用来获取新的token,我这边分为token和access_token两个字段,其实就一个时效长一个时效短。

完整代码如下

  let devUrl = '';import store from '../store/index.js'import { loginOut } from './index.js'const baseUrl = devUrl;const POST = 'POST';const UPLOAD = 'UPLOAD';const SUCCESS_CODES = 200;const RefreshCode = 777;const LogoutCode = 503;const TOKEN_ERROR = 444const ERRCODE = 500let promiseQueue = []let exeQueue = falselet needBeginLogin = true// 刷新tokenasync function RefreshTokenRQ(cb) {try {if (store.state.access_token) {uni.request({url: `${baseUrl}/user/refreshToken`,data: {exchangeToken: store.state.access_token},success(res) {if (res.data.status === SUCCESS_CODES) {store.commit('setToken', res.data.data)cb && cb()} else {loginOut()}}})} else {loginOut()}} catch (e) {}}const getHeader = () => {return {token: store.state.token,};};/**** @param {string} method 请求方法* @param {string} url api地址* @param {string} data 入参*/const request = async (requestObj) => {// 显示加载中 效果// uni.showLoading({// 	title: "",// 	mask: true,// });return new Promise((resolve, reject) => {uni.request({url: `${baseUrl}${requestObj.url}`,method: requestObj.method || 'get',data: requestObj.data || {},header: Object.assign(getHeader(), requestObj.header || {}),success(res) {// 请求成功const data = res.data;requestMethods(requestObj, data, resolve, reject )},fail(err) {console.log(err);// 请求失败reject(new Error('Por favor verifique a rede'));}});})}function requestMethods (requestObj, data, resolve, reject) {if (data.status === SUCCESS_CODES) {if (requestObj.resolve) {requestObj.resolve(data.data);let promiseQueueItem = promiseQueue.shift();if (exeQueue) {exeQueue = false;while (promiseQueueItem) {request(promiseQueueItem);promiseQueueItem = promiseQueue.shift();promiseQueue = promiseQueue;}if (!promiseQueueItem) {exeQueue = true;needBeginLogin = true;}}} else {resolve(data.data);}} else {// 其他异常if (data.status === RefreshCode) {try {if (store.state.access_token) {requestObj.resolve = resolve;promiseQueue.push(requestObj); //请求失败了,把该请求放到promise队列,等待更新token后重新调用。if (!needBeginLogin) {return;}//防止重复刷新token。needBeginLogin = false;RefreshTokenRQ(() => { //获取完token以后执行回调//重新登陆以后调用一次队列中的promise;并设置队列为可循环状态。let promiseQueueItem = promiseQueue.shift();if (promiseQueueItem) {exeQueue = true;request(promiseQueueItem);}}, true)} else {loginOut()}} catch (e) {}return} else if (data.status === LogoutCode || data.status === TOKEN_ERROR) {loginOut()return;} else {uni.showToast({title: data.message,icon: 'none'});}reject(data);}}export function get(url, data, header = {}, method = 'GET') {return request({url,data,header})}export function post(url, data, header = {}, method = 'POST') {return request({url,data,method,header})}export default{get,post};

以上loginOut和store根据自己实际情况调整

这篇关于uniapp登录成功后跳回原有页面+无感刷新token的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1016175

相关文章

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》:本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

Oracle登录时忘记用户名或密码该如何解决

《Oracle登录时忘记用户名或密码该如何解决》:本文主要介绍如何在Oracle12c中忘记用户名和密码时找回或重置用户账户信息,文中通过代码介绍的非常详细,对同样遇到这个问题的同学具有一定的参... 目录一、忘记账户:二、忘记密码:三、详细情况情况 1:1.1. 登录到数据库1.2. 查看当前用户信息1.

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁(Table Lock)2. 页面锁(Page Lock)3. 行锁(Row Lock

MobaXterm远程登录工具功能与应用小结

《MobaXterm远程登录工具功能与应用小结》MobaXterm是一款功能强大的远程终端软件,主要支持SSH登录,拥有多种远程协议,实现跨平台访问,它包括多会话管理、本地命令行执行、图形化界面集成和... 目录1. 远程终端软件概述1.1 远程终端软件的定义与用途1.2 远程终端软件的关键特性2. 支持的

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依