uniapp判断是否登录跳转处理

问题

uniapp中,我们的页面是在pages.json里面配置的,第一个页面是我们的启动页,
假设我们第一个启动页设置成登录页,那我们每次是不是每次检测token,都会监测登录页,然后才会跳转至想要的页面
假设我们第一个启动页设置成首页,那我们同样的监测token,也会每次都会经过一下首页,就会存在闪烁一下的问题

解决

我们肯定的想法就是在onLauch生命周期中进行判断是否有存储的token,然后再进行判断,同样的是闪烁问题

使用plus.navigator.closeSplashscreen()
首先manifest.json app-plus 默认这两值是true 设置改为false 需要时在关闭
在这里插入图片描述
对于manifest.json源码配置

"app-plus" : {
     "splashscreen" : {
         "alwaysShowBeforeRender" : false,
         "waiting" : true,
         "autoclose" : false,
         "delay" : 0
     }
 }

在onLaunch生命周期中进行判断

onLaunch: function () {
	//应用初始化完成触发(只触发一次)
	const token = uni.getStorageSync('token');//获取token
	if (token) {
		//存在则关闭启动页进入首页
		plus.navigator.closeSplashscreen();
	} else {
		//不存在则跳转至登录页
		uni.reLaunch({
			url: "/pages/login/index",
			success: () => {
				plus.navigator.closeSplashscreen();
			}
		})
	}
},

我们在pages.json中把首页设置为第一页

"pages": [
		/*首页设置为第一页*/
		{
			"path":"pages/1-home/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle":"custom"
			}
		},
		{
			"path": "pages/login/index",
			"style": {
				"navigationBarTitleText": "登录",
				"navigationStyle":"custom"
			}
		}
	],

亲测可行

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 UniApp 开发中,登录后的页面跳转通常涉及到路由管理和状态管理。以下是一个基本流程: 1. **设置登录入口**:在登录界面,你可以创建一个登录按钮或链接,当用户点击后会触发登录操作。 ```html <a @click="handleLogin">登录</a> ``` 然后在对应的 JavaScript处理点击事件: ```javascript methods: { handleLogin() { // 执行登录逻辑 this.$axios.post('/api/login', { username: '...', password: '...' }).then(response => { // 登录成功,保存 token 或者其他身份标识 localStorage.setItem('token', response.data.token); // 使用 Vue Router 跳转到目标页面 this.$router.push({ name: 'Home' }); }).catch(error => { console.error('登录失败:', error); }); } } ``` 2. **配置路由**:在项目的 `router.js` 或 `router.config.js` 文件中,定义一个路由,比如 `Home`,作为登录成功的默认目标页: ```javascript { path: '/home', name: 'Home', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true } // 标记需要验证权限 } ``` 3. **路由守卫**:可以使用 `beforeEach` 路由守卫检查用户是否已经登录,如果未登录则重定向到登录页: ```javascript router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !store.state.user.isAuthenticated) { next('/login') // 如果未登录跳转登录页 } else { next() // 已登录,继续导航 } }); ``` 4. **状态管理**:使用 Vuex 管理用户的登录状态和 token,这样在整个应用中都可以访问到登录信息。 相关问题--: 1. 如何在 UniApp处理用户登出时的路由跳转? 2. 如何在路由守卫中判断用户是否已登录? 3. 如何结合 Vuex 实现登录状态的全局管理?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值