zoukankan      html  css  js  c++  java
  • taro3.x: tarojs-router

    npm install tarojs-router

    简单实现:

    github: https://github.com/lblblong/tarojs-router

    创建router配置目录src/router

    src/router/middleware/author-check.ts

    import storage from '@/utils/storage'
    import Taro from '@tarojs/taro'
    import { IMiddlware } from "tarojs-router"
    import { toLogin } from '../router'
    
    
    export const AuthCheck: IMiddlware<{ mustLogin: boolean }> = async (ctx, next) => {
      if (ctx.route.ext?.mustLogin) {
        const token = storage.getItem('token')
        if (!token) {
          const { confirm } = await Taro.showModal({
            title: '提示',
            content: '请先登录'
          })
    
          if (confirm) {
            toLogin()
          }
          throw Error('该页面必须要登陆:' + ctx.route.url)
        }
      }
    
      await next()
    }

    src/router/index.ts

    import { Router } from 'tarojs-router'
    import { AuthCheck } from './middleware/author-check'
    
    export * from './router'
    
    Router.config({
      middlewares: [AuthCheck]
    })

    src/router/router.ts

    import { Router, NavigateType } from 'tarojs-router'
    
    import { routes } from './routes'
    
    export const toLogin = (params: any = {}, type: string = '') => {
        let url: string = ''
        if (IS_H5) {
            url = `/login/phone/index`
        } else {
            url = `/login/index`
        }
        if (type) {
            Router.navigate(
                { url },
                {
                    params,
                    type: NavigateType.navigateTo
                }
            )
        } else {
            Router.navigate(
                { url },
                { type: NavigateType.redirectTo }
            )
        }
    }
    
    export const navigateHouseModule = (module: string, params: any = {}, data: any = {}) => {
        return Router.navigate(routes[module], { params, data })
    }

    src/router/routes.ts

    export const routes = {
      index: {
        url: '/pages/index/index'
      },
      me: {
        url: '/pages/me/index',
        ext: {
          mustLogin: true
        }
      },
     commentForm: {
            url: '/house/new/commentForm/index',
            beforeRouteEnter: [HasLoginBack],
            ext: {
                checkLogin: true,
                type: 'navigateTo'
            }
        }
    
    }

     src/middleware/auth-check.ts -> hasLoginback:

    import storage from '@/utils/storage'
    import { toUrlParam } from '@/utils/urlHandler'
    import { IMiddlware } from "tarojs-router"
    import { toLogin } from '../router'
    
    interface ILoginBack {
      checkLogin: boolean
      type: string
    }
    
    export const HasLoginBack: IMiddlware<ILoginBack> = async (ctx, next) => {
      if (ctx.route.ext?.checkLogin) {
        const token = storage.getItem('token')
        if (!token) {
          const isTab = ctx.params.isTab || ''
          const backUrl = `${ctx.route.url}${toUrlParam(ctx.params)}`
          toLogin({ backUrl: encodeURIComponent(backUrl), isTab }, ctx.route.ext?.type)
        throw Error('该页面必须要登陆:' + ctx.route.url) // 不加h5会继续跳转
    } } await next() }
  • 相关阅读:
    Word Ladder
    Word Ladder II
    Valid Palindrome
    java 正则表达式-忽略大小写与多行匹配
    Vue自定义指令
    定义格式化时间的全局过滤器
    Vue过滤器的使用
    daterangepicker 设置默认值为空(转载)
    js时间戳与日期格式之间的互转
    Vuedevtools安装
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/14434181.html
Copyright © 2011-2022 走看看