需求
将uniapp的路由跳转promise化
navigateTo接受后端返回的url,需要自动解析跳转模式
所有的路由跳转都要先检测用户是否已登录 1)、如果未登录,打开登录弹框,用户授权登录,登录成功后要自动完成用户的上一次操作,无需用户再次点击跳转 2)、如果已登录,跳转对应的页面
实现
封装路由相关函数
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 : ( ) => {
return switchTab ( url)
} ,
} )
} )
}
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) ,
} )
} )