uni app 登录页设计 及解决物理返回问题

uni app 实现后台管理系统,android应用,登录成功后android手机物理返回可以到登录页,退出成功后,Android手机物理返回,又可以回到退出页面。

场景:

在没有登录的时候,一打开app 就要显示登录页面,如果登录过则显示第一个tab页面 由于底部的tab最多只能有三个,并且五个都已经占用,没有多余的tab分给登录页面, 如果将登录放在二级页面,那么,ios下屏幕上的左滑动,会返回到上一层,安卓的物理返回键,也会返回到上一层,无法做到登录页面视觉上是第一个页面

解决方法。

将登录页面新建成一个单独的页面login/index.vue 将login页面配置到page.json中,注意:要放置在第一个!!!! 启动页面修改成login页面,否则登录页物理返回,会到首页。

image.png 同时要配置 "popGesture": "none"//使ios默认手势关闭页面无效 pages.json 里面配置该页面不能左滑动 "popGesture": "none"

在routes.js中也要如此配置,

image.png

在router拦截器中 全局路由前置守卫中 用token判断是否允许跳转以及默认跳转到登录页面

//全局路由前置守卫
router.beforeEach((to, from, next) => {
	let token=uni.getStorageSync(ACCESS_TOKEN);
	if(token){
		 if (whiteList.indexOf(to.path) !== -1 && whiteList.indexOf(from.path) == -1) {
		   next(false)
		 }else{
		   next()
		 }
	}else{
		if (whiteList.indexOf(to.path) !== -1) {
		  next()
		}else{
		  next({ path: '/pages/login/index'})
		}
	} 

token存在时,不允许物理返回到登录页 router 可以使用uni-simple-router ext.dcloud.net.cn/plugin?id=5…

在登录页阻止默认操作 login/index.vue

onBackPress(e) {
        return true;//返回true阻止默认操作
},

退出事件时,跳转要使用uni.relaunch()!!!

handleClick_checkout() {
        const app = this
        uni.showModal({
          title: '温馨提示',
          content: '确认退出吗?',
          cancelText: "取消",
          confirmText: "确认",
          success: function success(res) {
            if (res.confirm) {
                store.dispatch('Logout')
                .then(result => {
                    console.log(result)
                    app.$toast(
                            '退出成功',
                    )
                    setTimeout(() => {
                            //关闭提示后跳转
                            uni.reLaunch({
                                    url:'/pages/login/index'
                            })
                    }, 1000)
            })
            .catch(err => {
                    app.$toast(err)
            })
            }
      }
});

以上就解决了uni app 登录页物理返回造成的影响了。