【工作实践-11】关于uniapp切换账号登录失败问题

遇到问题:在使用uniapp写的程序中,第一次打开程序登录(账号密码正确),调用登录接口,没有任何问题,正常登录;退出登陆后,输入不同的账号密码(账号密码均正确),调用登录接口提示登陆失败。很迷惑。

**揭露原因:**第一次登陆时查看接口详细信息,发现请求头中header携带的token为空,第二次用不同的账号密码登录时,接口请求头中header携带的token是第一次登录用户的token。前端在调用接口时,如果携带token,后端会通过判断token值来拦截请求,此时第一次的token与第二次登录用户的token不一致,所以导致登陆失败的结果。

**如何修改:**知道原因后,看了请求封装中的代码

javascript 复制代码
const isToken = withToken === false     // withToken表示此接口是否需要token
if (!isToken) {
			const token = uni.getStorageSync('AccessTokenKey')
			if (!token) {
				uni.showModal({
					title: '登录',
					content: '该功能需要登录后访问',
					showCancel: false,
					success(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: `/pages/login/login`,
							})
						}
					}
				})
			} else {
				config.header['Authorization'] = `Bearer ${token}`
			}
		}

我们知道登录接口是不需要携带token的,所以登录接口中withToken值为false,此时不会进入上面对的 if 判断,即不会对config的header做任何处理。所以第一次登录不会有任何问题。

第一次登陆成功后,用户通过登录接口请求到了自己的token。退出登录后,第二个用户登录(账号密码均正确),即使此时withToken值依旧为false,但由于不进入 if 判断,没有对header做任何处理,所以此时的 header 依旧是上一个请求接口的 header 信息,token也是上一个用户的 token 信息,提示登录失败。

**修正代码:**对if判断添加else分支,并对header的token信息做置空操作

javascript 复制代码
        const isToken = withToken === false
		if (!isToken) {
			const token = uni.getStorageSync('AccessTokenKey')
			if (!token) {
				uni.showModal({
					title: '登录',
					content: '该功能需要登录后访问',
					showCancel: false,
					success(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: `/pages/login/login`,
							})
						}
					}
				})
			} else {
				config.header['Authorization'] = `Bearer ${token}`
			}
		} else {
			config.header['Authorization'] = ''
		}

**收获:**在写 if 或其它任何条件分支的代码时,一定要综合考虑多种情况,争取尽可能的考虑完善,避免疏漏。

相关推荐
ModyQyW14 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘1 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端2 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
today喝咖啡了吗2 天前
uniapp项目中node_modules\sass\sass.dart.js的体积过大怎么处理
javascript·uni-app·sass
遗憾随她而去.2 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰2 天前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app