V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tlerbao
V2EX  ›  前端开发

有懂 Uniapp 的亲,进来请教下问题

  •  
  •   tlerbao · 27 天前 · 1358 次点击

    非前端刚接触 Uniapp ,一片空白,问题可能比较初级

    1. 当整个小程序必须登录才能使用的时候,这个自动 OAuth 登录的逻辑写在哪里比较好,app.vue 的 onLaunch 算不算好的选择。

    2. 拦截器拦截 switchTab 在小程序那边不行,Uniapp 文档让在鉴权的 tabbar 页面的 onShow 处理,我尝试在 onShow 添加如下代码会有一个问题,页面内容会先显示出来再跳转到 login 页面,正确的姿势应该是怎么样的?

    <script lang="ts" setup>
    import { useUserStore } from '@/store'
    const userStore = useUserStore()
    onShow(() => {
      if (!userStore.isLogin) {
        uni.redirectTo({
          url: '/pages/login/index',
        })
      }
    })
    
    20 条回复    2024-05-20 19:53:13 +08:00
    4ark
        1
    4ark  
       27 天前
    1. onLaunch 没毛病
    2. tab 页是否可分享?不可分享则自定义 tab 组件,点击事件拦截;可分享则分享的时候路径取 login/index + 某个特定参数,登录过了再重定向到 tab 页
    eratpfus7
        2
    eratpfus7  
       27 天前
    在跳转前加判断
    tlerbao
        3
    tlerbao  
    OP
       27 天前
    @4ark
    2 里的点击事件拦截明白了,可分享的话 小程序内容用户点击 tab 切换怎么弄呢?没太听明白
    tlerbao
        4
    tlerbao  
    OP
       27 天前
    @eratpfus7 您说的跳转前加判断能详细点吗?
    4ark
        5
    4ark  
       27 天前
    @tlerbao 可分享的话,就同时做点击事件拦截和分享进入拦截
    ChangJingli
        6
    ChangJingli  
       27 天前
    可以用 uniapp 自带的拦截器实现:

    官方文档: https://zh.uniapp.dcloud.io/api/interceptor.html
    大致实现方案: https://blog.csdn.net/qq_37906822/article/details/122704299
    tlerbao
        7
    tlerbao  
    OP
       27 天前
    @4ark #5 意思是可分享页用自定义 tabbar 组件是吗?
    tlerbao
        8
    tlerbao  
    OP
       27 天前
    @ChangJingli 我已经写了类似的拦截器,但是发现拦截器拦截 switchTab 在小程序端不行的下面是官方原话

    “注意:拦截 uni.switchTab 本身没有问题。但是在微信小程序端点击 tabbar 的底层逻辑并不是触发 uni.switchTab 。所以误认为拦截无效,此类场景的解决方案是在 tabbar 页面的页面生命周期 onShow 中处理。”
    notproblem
        9
    notproblem  
       27 天前
    小程序一般是这样,用户点击某个按钮或者功能的时候弹出登录弹窗,最好不要放到 onShow 之类的,微信小程序有可能审核不过。
    PoorBe
        10
    PoorBe  
       27 天前
    小程序只能通过点击某个功能的时候才能提示需要登录吧,要不然审核不过的
    ChangJingli
        11
    ChangJingli  
       27 天前
    @tlerbao 小程序强制登录的话,/login 页面放在 pages 数组第一行,就不会存在 switchTab 的问题呢。

    这时候的流程是:
    小程序启动->进入登录页->有 token->进首页
    ->无 token->留在登录页
    tlerbao
        12
    tlerbao  
    OP
       27 天前
    @ChangJingli #11 不强都登录,个别 tabbar 页面需要登录,这个路由鉴权就不行了
    tlerbao
        13
    tlerbao  
    OP
       27 天前
    @notproblem
    @PoorBe 还有审核不过的说法?

    那我整个小程序必须先登录才能使用,还非要在页面整个按钮哈哈?
    ChangJingli
        14
    ChangJingli  
       27 天前
    @tlerbao 建议细化需求描述,因为第一条写明了:当整个小程序必须登录才能使用的时候
    youknowsomething
        15
    youknowsomething  
       27 天前
    小程序不是必须有未登录页面才能过审吗?必须登录才能使用的小程序过不了审,反正我这边是没成功过
    moonbeama
        16
    moonbeama  
       27 天前
    我之前有过类似需求,我照着微信小程序社区的方法重写了生命周期,即每次进入小程序都会登录刷新 token ,拿到 token 之后再去请求接口,不会存在登录接口响应延迟而先执行其它接口报 401 的情况

    https://developers.weixin.qq.com/community/develop/article/doc/00002ac57208f0e7335d111f156013
    moonbeama
        17
    moonbeama  
       27 天前
    @moonbeama 我做的这个业务是没有登录页的,是静默登录
    Ashore
        18
    Ashore  
       27 天前
    我是这么做的:
    1. 在 onLaunch 的时候判断有无 token,没 token 直接跳转到登录页面。
    2. 没有 token 的时候,判断当前页面是不是 login 页,是 login 页的话不跳转。
    3. 有 token 的时候。去请求用户信息接口。如果后端返回 401 跳转到登录页。
    Ashore
        19
    Ashore  
       27 天前
    还有个问题就是,微信小程序是支持静默登录的。你可以通过 openid 和 Unionid (如果有 Unionid 的话)来给用户创建一个账户。等到必须申请用户信息的时候你再跳转到信息授权页面让用户授权手机号和头像。

    否则的话小程序的审核会被拒绝。去年的时候我们就整改过。
    dbaazz
        20
    dbaazz  
       26 天前
    @moonbeama #16 写了个支持 vue3 composition api 的,有兴趣可以看下
    https://www.npmjs.com/package/custom-hooks-plus
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2553 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 08:36 · PVG 16:36 · LAX 01:36 · JFK 04:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.