uniapp vite 路由跳转、登录模块封装(非无感登录)

需求

  1. 将uniapp的路由跳转promise化
  2. navigateTo接受后端返回的url,需要自动解析跳转模式
  3. 所有的路由跳转都要先检测用户是否已登录
    1)、如果未登录,打开登录弹框,用户授权登录,登录成功后要自动完成用户的上一次操作,无需用户再次点击跳转
    2)、如果已登录,跳转对应的页面

在这里插入图片描述

实现

  1. 封装路由相关函数
import {
    useStore } from '@/store'
import {
    InjectionKey } from 'vue'
export type SetLoginCallback = (params: {
   
  loginCallbackMethod: Function
  loginCallbackParams: any[]
}) => void
export const SetLoginCallbackKey: InjectionKey<SetLoginCallback> = Symbol('setLoginCallback')
type routerLink = 'navigateTo' | 'redirectTo' | 'reLaunch' | 'switchTab'

export default function () {
   
  const _this = (getCurrentInstance() as any).ctx
  const store = useStore()
  const setLoginCallback = inject(SetLoginCallbackKey)

  const navigateTo = (url: string, events?: any): any => {
   
    return new Promise((resolve, reject) => {
   
      if (!url) {
   
        return reject(new Error('路由为空'))
      } else if (/^wx/.test(url)) {
   
        return navigateToMiniProgram({
   
          appId: url,
        })
      } else if (/^http/.test(url)) {
   
        url = `/pages/web-view/index?url=${
     url}`
      }
      uni.navigateTo({
   
        url,
        events,
        success: (res) => {
   
          resolve(res.eventChannel)
        },
        fail: () => {
   
          /*尝试跳转到tab页面*/
          return switchTab(url)
        },
      })
    })
  }

  /*跳转tab*/
  const switchTab = (url: string): any => {
   
    return new Promise((resolve, reject) => {
   
      uni.switchTab({
   
        url,
        success: (res) => resolve(res),
        fail: (err) => reject(err),
      })
    })
  }

  /*关闭当前跳转其他*/
  const redirectTo = (url: string): any => {
   
    return new Promise((resolve, reject) => {
   
      uni.redirectTo({
   
        url,
        success: (res) => resolve(res),
        fail: (err) => reject(err),
      })
    })
  }

  /*关闭所有跳转其他*/
  const reLaunch = (url: string): any => {
   
    return new Promise((resolve, reject) => {
   
      uni.reLaunch({
   
        url,
        success: (res) => resolve(res),
        fail: (err) => reject(err),
      })
    })
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值