解决uniapp token失效跳到登录页showToast不显示

最新推荐文章于 2024-06-23 18:16:18 发布
原创 最新推荐文章于 2024-06-23 18:16:18 发布 · 495 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端 #javascript

文章描述了在uni应用开发中，如何通过uni.reLaunch()方法重定向到登录页面，以及在用户未登录时使用setTimeout设置登录提示toast的过程。 
uni.reLaunch({
   
   
	url: "/pages/login/login"
})
setTimeout(() => {
   
   
	uni.showToast({
   
   
		title:
最低0.47元/天 解锁文章
uniapp项目如何优雅处理Token失效自动重试 token无感刷新
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
06-22 358
像这种请求封装方案，是所有中大型项目都绕不过去的点。建议你在搭建项目初期就集成好，避免后期返工。如果你也在用 uniapp 或者遇到类似场景，欢迎留言交流，我会在评论区补充更多实用技巧。
Android Retrofit统一处理 token失效跳转到登录页面
Simon_Crystin的博客
04-16 7365
文章目录1.问题引入2.解决方案 1.问题引入 在客户端开发中，我们可能会遇到token失效问题，这个时候我们可以刷新token或者跳转到登录页面，这里我们就给出如何统一处理token失效问题，基于Retrofit。 2.解决方案 在BaseFilterObserver（implements Observer）中重写onNext方法 public void onNext(@NonNull Res...
uniapp中token失效跳转回登录页
qq_27033551的博客
10-20 3412
uniapp 请求封装 请求拦截
uni-app页面跳转问题
Guiasan_的博客
02-25 5887
解决app登录跳转问题。
uniapp 判断用户登录过，直接进入首页
weixin_68166404的博客
07-01 2686
App.vue 文件 onLaunch 生命周期里面写法 （根据自己需求情况判断）这里是用到token判断存在跳转至首页 不存在跳转登录页。manifest.json 源码配置。
uniapp小程序token失效403跳转登录页坑！！！！当前页面多个接口会跳多个登录页案例 如何解决 ！！！
weixin_69666355的博客
05-04 2686
token失效多次跳登录页
[uni-app] uni.showToast 一闪而过问题/设定时间无效/1秒即逝
iOSTianNan的博客
11-20 4048
toast一闪就消失1.猜测频繁点击导致 – 排除2.猜测再定时器内导致-- 排除3.和封装的接口调用一起导致 - 是改原因深挖发现:axios封装中, 对loading/hindloading进行了配置,看来是 showToast 与 loading等冲突导致的。
精选资源
完整axios 带token 失效自动刷新
03-25
此开箱即用，详情使用请看https://www.cnblogs.com/panax/p/10942889.html
【uniapp】unicloud云开发获取token 一键登录
bjxlyy的博客
06-13 3328
无论是用微信开发者工具还是uniapp开发小程序，基本上所有情况之下，登录是必不可少的。简洁明了，直接开始。
uniapp，一键登录老是出现这个问题
weixin_73480865的博客
06-23 1308
bug:Error: 无法连接uniCloud本地调试服务，请检查当前客户端是否与主机在同一局域网下。- 如需使用uniCloud本地调试服务，请将客户端与主机连接到同一局域网下并重新运行到客户端。- 如果在HBuilderX开启的状态下切换过网络环境，请重启HBuilderX后再试。解决方法：虽然偶尔能行，但次次无法成功的话，影响开发效率，应该放弃使用。- 检查系统防火墙是否拦截了HBuilderX自带的nodejs。- 检查是否错误的使用拦截器修改uni.request方法的参数。
(小技巧)刷新页面一定次数后自动 转到登录界面
weixin_33738555的博客
11-03 215
刷新页面一定次数后自动 转到登录界面 <script> if(window.name==""){   window.name = "0"; } else{   window.name = eval(window.name) + 1;   if(window.name=="5")  //刷新页面次数>5   {       alert("You have re...
uniapp开发小程序Token值失效的问题（带图详细解说）
weixin_45721912的博客
05-31 5750
1.开发微信小程序的时候你会发现明明token值都对，而且还没过有效期，为什么请求数据的时候提示登录失效，请重新登录。 2.根据我的经验来说可能是缺少请求头的原因，不知道对你有没有效果。看下图： 1.这是第一步。查看返回的值 2. 我们就要想办法取到这个值，我用到了字符串的截取 3. 把取到的值 放在本地缓存中，以方便后期使用 4.把取到保存到缓存中的值并使用他，记住这一步很重要。因为以后每个页面需要用到token值的页面，都需要用到这一步 最后一步，查看一下有没有这个值。我要说的一点就是这个co
解决刷新页面回到登录页面
weixin_45849112的博客
08-19 6721
当前在 permission.js 路由拦截中是通过浏览器 localStorage 获取 token 值，但现在使用的Vuex状态管理，那我 们希望通过 store 来获取 token 状态值. 在 src\permission.js 中将获取 token 方式替换为从 store 状态中获取， 如下： 注意要import导入store 。。。 import store from './store' router.beforeEach((to, from , next) => { // 1.
uni页面跳转并刷新，跳转调用本页面的方法
m0_71225230的博客
12-16 816
有2个页面，a页面上点击跳转b页面，在b页面上填写资料，填完点提交返回a页面，并刷新改变a页面的状态。$vm适用于uniapp和h5。
解决uni-app使用vuex刷新后数据失效 即数据刷新后消失
wh20141212的博客
04-01 6260
vue刷新当前页面有挺多种方法，比如 window.location.reload() 或者 this.$router.go(0) 但是这两种方法是会出现一瞬间的白屏，体验不好，所以这里给大家推荐第三种比较好用的刷新页面的方法 在app.vue的加上v-if属性 在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为true data () { return { isR...
uniapp登录成功后跳回原有页面+无感刷新token
farme_guan的博客
05-29 2714
在C端的页面场景中，我们经常会有几种情况到登录页： - [ ] 区分需要登录和不用登录的页面，点击需要登录才能查看的页面 - [ ] 已经登录但是超时，用户凭证失效等原因
关于uni-app微信小程序没有cookie，保持会话一致问题
weixin_41352794的博客
12-04 9775
创建一个全局globalData，添加cookie。 登陆成功后，将cookie 保存下来
uniapp中token操作：存储、获取、失效处理。
qq_43483403的博客
08-07 8066
uniapp中token操作：存储、获取、失效处理。
vue3 uniapp 没有token 进入登录页
最新发布
05-29
### 未获取token时自动跳转登录页的实现方法 在Vue3和UniApp项目中，当用户未获取到有效的token时，可以采用以下方式实现自动跳转至登录页面的功能。以下是具体的实现方案： #### 1. **全局生命周期钩子验证** 在应用启动时或页面加载时，通过`onLaunch`或`onShow`生命周期钩子检查是否存在token。如果不存在，则直接跳转到登录页面。 ```javascript // App.vue export default { onLaunch() { const token = uni.getStorageSync('token'); // 从本地存储中获取token if (!token) { // 如果没有token console.log('no token'); uni.reLaunch({ // 使用reLaunch确保登录页无法返回 url: "/pages/login/login" }); return; } }, onShow() { const token = uni.getStorageSync('token'); // 每次页面显示时再次检查token if (!token) { uni.reLaunch({ url: "/pages/login/login" }); } } } ``` [^3] #### 2. **页面级生命周期钩子验证** 在每个页面的`onLoad`或`onShow`生命周期中进行token验证。如果token无效或不存在，则跳转到登录页面。 ```javascript // 示例页面 export default { onShow() { const userToken = uni.getStorageSync('token'); // 获取token if (!userToken) { // 如果token不存在 uni.showToast({ title: '请重新登录', icon: 'none' }); uni.reLaunch({ // 跳转到登录页 url: "/pages/login/login" }); } else { this.initData(); // 初始化页面数据 } }, methods: { async initData() { // 页面初始化逻辑 } } } ``` [^2] #### 3. **Axios拦截器中的token验证** 在网络请求中集成Axios拦截器，用于在每次请求前验证token的有效性。如果token无效或不存在，则跳转到登录页面。 ```javascript import axios from 'axios'; // 请求拦截器 axios.interceptors.request.use(config => { const token = uni.getStorageSync('token'); // 获取token if (token) { config.headers['Authorization'] = `Bearer ${token}`; // 设置请求头中的token } return config; }, error => { return Promise.reject(error); }); // 响应拦截器 axios.interceptors.response.use(response => { return response; }, error => { if (error.response && error.response.status === 401) { // 如果返回401状态码 uni.showToast({ title: '登录已过期，请重新登录', icon: 'none' }); uni.reLaunch({ url: "/pages/login/login" // 跳转到登录页 }); } return Promise.reject(error); }); ``` [^1] #### 4. **登录流程与token保存** 在用户登录成功后，将token保存到本地存储中，并在后续请求中携带token。 ```javascript const handleLogin = async () => { try { const res = await api.login({ username: 'test', password: '123456' }); if (res.status === 'y') { // 登录成功 uni.setStorageSync('token', res.data.token); // 保存token uni.navigateTo({ url: '/pages/index/index' // 跳转到首页 }); } } catch (error) { console.error('登录失败:', error); } }; ``` [^4] #### 5. **性能优化与错误处理** - 合理使用生命周期钩子，避免不必要的token检查。 - 在拦截器中添加防抖机制，防止频繁触发跳转逻辑。 - 提供清晰的错误提示信息，提升用户体验。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值