uniapp路由守卫

2022-10-26,,

项目地址:https://hhyang.cn/v2/start/quickstart.html

​ 按照他的方法安装,创建相应的js即可,有点基础的自己捣鼓一下就可以了。我的应用场景是:没有登录痕迹->直接显示登录页面;登录痕迹存在则检查是否在登录状态->在则不处理,不在则删除痕迹。重点的来了!!下次启动时直接启动到登录页面。

需要注意的点:

    启动页为一张空白页面,且必须为非tabBar页面
    按照插件提示配置好相关参数,基本复制粘贴即可

开始配置:

//pages.json
"pages": [
{
"path":"pages/start/start"
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
}
]
<!-- start.vue -->
<template>
<view>
</view>
</template> <script>
export default {
data() {
return { }
},
methods: { },
onShow() {
if(!uni.getStorageSync('Session')){
uni.redirectTo({
url:'/pages/login/index'
})
}else{
uni.switchTab({
url:'/pages/index/index'
})
}
}
}
</script> <style>
</style>
//router.js
router.beforeEach((to, from, next) => {
//检查是否存在Session,且不是来自login
if(!uni.getStorageSync('Session') && to.path!=='/pages/login/index'){
//没有登录,next到登录页面
//这里一定要对to.path做判断,否则会无限循环
return next({path:'/pages/login/index',NAVTYPE :'replace'})
}
if(to.path=='/pages/start/start'){
//如果有session,且地址是strt,证明正在启动APP
return next('/pages/index/index')
}
//其他路由不管
next()
})

至此结束,完全OK

uniapp路由守卫的相关教程结束。

《uniapp路由守卫.doc》

下载本文的Word格式文档,以方便收藏与打印。