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

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

需要注意的点:

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

开始配置:

//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路由守卫的更多相关文章

  1. angular4.0 路由守卫详解

    在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...

  2. vue2.0 实现导航守卫(路由守卫)

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  3. angular路由详解六(路由守卫)

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

  4. angular路由守卫

     路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...

  5. Angular4.x通过路由守卫进行路由重定向,实现根据条件跳转到相应的页面

    需求: 最近在做一个网上商城的项目,技术用的是Angular4.x.有一个很常见的需求是:用户在点击"我的"按钮时读取cookie,如果有数据,则跳转到个人信息页面,否则跳转到注册 ...

  6. Angular路由——路由守卫

    一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...

  7. Angular5 路由守卫

    今年下半年一直很忙,没有多少时间来写博客,很多笔记都记在了本地一起提交到了git上边. 夏末的时候做的两个vue项目中有接触到vue的路由守卫,今天在另外一个angular上,发现路由守卫有异常,导致 ...

  8. nuxtjs中使用路由守卫

    在vue中的路由守卫一般是来验证token失效什么的,当然也可以设置权限啦,在nuxtjs中如何使用路由守卫呢,话不多说,直接上代码 在plugins目录下简历route.js export defa ...

  9. vue路由守卫应用,监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

随机推荐

  1. Codeforces Round #789 (Div. 2) A-C

    Codeforces Round #789 (Div. 2) A-C A 题目 https://codeforces.com/problemset/problem/1677/A 题解 思路 知识点:模 ...

  2. python虚拟环境(python+conda)

    python的不同虚拟环境就相当于在电脑上装了很多个python.下面写python创建虚拟环境.conda创建虚拟环境和在pycharm中配置一下. python -m venv (要创虚拟环境的路 ...

  3. java,接口

    package Demo.oop.APP.Demo07; //interface 定义接口的关键字:接口都需要实现类 public interface UserService { //接口中的所有的定 ...

  4. HCNP Routing&Switching之DHCP中继

    前文我们聊了下BFD相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16487842.html:今天来聊一聊DHCP中继相关话题: DHCP的作用 DH ...

  5. vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件

    如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...

  6. 万答#21,如何查看 MySQL 数据库一段时间内的连接情况

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 查看方式 已知至少有两种方式可以实现 1.开启 general_log 就可以观察到 开启命令 mysql> set ...

  7. 分享俩个js数组比较少用的方法join与from

    1:array.join 用于将数组中的所有元素转化为字符串 例: var arr = ["one", "two", "four"]; va ...

  8. Three---面向对象与面向过程/属性和变量/关于self/一些魔法方法的使用/继承/super方法/多态

    python的面向对象 面向对象与面向过程 面向过程 面向过程思想:需要实现一个功能的时候,看重的是开发的步骤和过程,每一个步骤都需要自己亲力亲为,需要自己编写代码(自己来做) 面向对象 面向对象的三 ...

  9. Nginx 代理Vue项目出现Invalid Host header

    说明 使用 Nginx 的 upstream 对 Vue 项目做负载均衡时,代理的地址无法访问目标地址,且页面报错: Invalid Host header(无效主机头) 分析 检查 Nginx 的 ...

  10. 1、spingIOC+IDEA+Maven

    1.先配置spring.springmvc通用xml文件的头部信息 spring.springmvc通用xml文件的模板内容如下: 1 <?xml version="1.0" ...