当前位置：首页 > article >正文

uni-app 登录成功后自动跳转至登录前页面（H5\微信小程序）

article 2025/2/26 20:56:30

uni-app 登录成功后自动跳转至登录前页面

一、新建配置文件，位于根目录下，config.js

// 应用全局配置
module.exports = {
  // 应用信息
  appInfo: {
	loginPage: "/pages/login",
	cacheRouteKey: "unLoginTargetRoute"
	// 更多配置项...
  }
  // 更多配置项...
}

二、新建文件：router.js，位于：utils文件夹下

import { appInfo } from '@/config.js'

export function cacheRouter(_router) {
	
	let router = _router
	
	// 获取当前页面栈信息
	const pages = getCurrentPages()
	if(pages && pages.length) {
		
		// 获取当前页面路由信息
		const currentPage = pages[pages.length - 1]
		router = '/' + currentPage.route
		
		if(router !== appInfo.loginPage) {
			
			let options = undefined
			// #ifdef MP-WEIXIN
			options = currentPage.options
			// #endif
			// #ifdef H5
			if(currentPage.__page__) {
				options = currentPage.__page__.options
			}
			// #endif
			if(options) {
				let params = ''
				for(let key in options) {
					params += '&' + key + '=' + options[key]
				}
				if(params && params.length) {
					router += '?' + params.substring(1)
				}
			} else {
				// #ifdef MP-WEIXIN
				if(currentPage.$page && currentPage.$page.fullPath) {
					router = currentPage.$page.fullPath
				}
				// #endif
				// #ifdef H5
				if(currentPage.__page__ && currentPage.__page__.fullPath) {
					router = currentPage.__page__.fullPath
				}
				// #endif
			}
		}
	}
	
	if(router) {
		uni.setStorageSync(appInfo.cacheRouteKey, router)
	}
}

三、H5兼容适配

在App.vue中添加以下代码

import config from '@/config.js'
import { cacheRouter } from '@/utils/router.js'

onLaunch: function() {
	//#ifdef H5
	this.checkLogin()
	//#endif
},
methods: {
	checkLogin() {
		if(// TODO 未登录判断) {
			const _uri = window.location.href
			let _route = ''
			// 默认【域名+#+页面】分割值
			if (_uri.indexOf('#') !== -1) {
				_route = _uri.substring(_uri.indexOf('#') + 1)
			}
			// h5/：为manifest.json下【Web配置 -> 运行的基础路径】
			if (_uri.indexOf('h5/') !== -1) {
				_route = _uri.substring(_uri.indexOf('h5/') + 3)
			}
	
			cacheRouter(_route)
			uni.reLaunch({
				url: config.appInfo.loginPage
		    })
		}
	}
}

四、通配

在拦截器或后端请求方法中，引入方法，合适位置添加使用方法代码即可。
例如：

1、拦截器

// 页面跳转验证拦截器
import { appInfo } from '@/config.js'
// 登录页面
const loginPage = appInfo.loginPage

// 页面白名单
const whiteList = [
	loginPage, '/pages/register', '/pages/common/webview/index'
]

// 检查地址白名单
function checkWhite(url) {
	const path = url.split('?')[0]
	return whiteList.indexOf(path) !== -1
}

let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
list.forEach(item => {
	uni.addInterceptor(item, {
		invoke(to) {
			if (// TODO 验证是否登录) {
				if (to.url === loginPage) {
					uni.reLaunch({
						url: "/"
					})
				}
				return true
			} else {
				if (to.url !== loginPage) {
					// 缓存当前路由信息
					cacheRouter(to.url)
				}
				// 验证是否放行
				if (checkWhite(to.url)) {
					return true
				}
				uni.reLaunch({
					url: loginPage
				})
				return false
			}
		},
		fail(err) {
			console.log(err)
		}
	})
})

2、后端请求方法

import config from '@/config'
import { cacheRouter } from '@/utils/router.js'
const loginPage = config.appInfo.loginPage

// TODO 判断接口返回状态码code是否正常，通常code=401时，代表未登录
if (code === 401) {
	cacheRouter()
	showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
		if (res.confirm) {
			// TODO 跳转登录页面
		}
	})
}

五、登录页面

import { appInfo } from '@/config.js'

// 登录成功后调用，处理函数
loginSuccess(result) {
	let unLoginTargetRoute = uni.getStorageSync(this.appInfo.cacheRouteKey)
	if (unLoginTargetRoute) {
		uni.removeStorageSync(this.appInfo.cacheRouteKey)
	} else {
		unLoginTargetRoute = '/pages/index'
	}
	uni.reLaunch({
		url: unLoginTargetRoute
	})
}