uni app 实现后台管理系统,android应用,登录成功后android手机物理返回可以到登录页,退出成功后,Android手机物理返回,又可以回到退出页面。
场景:
在没有登录的时候,一打开app 就要显示登录页面,如果登录过则显示第一个tab页面 由于底部的tab最多只能有三个,并且五个都已经占用,没有多余的tab分给登录页面, 如果将登录放在二级页面,那么,ios下屏幕上的左滑动,会返回到上一层,安卓的物理返回键,也会返回到上一层,无法做到登录页面视觉上是第一个页面
解决方法。
将登录页面新建成一个单独的页面login/index.vue 将login页面配置到page.json中,注意:要放置在第一个!!!! 启动页面修改成login页面,否则登录页物理返回,会到首页。
同时要配置 "popGesture": "none"//使ios默认手势关闭页面无效
pages.json 里面配置该页面不能左滑动 "popGesture": "none"
在routes.js中也要如此配置,
在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 登录页物理返回造成的影响了。