Go+gRPC-Gateway(V2) 微服务实战,小程序登录鉴权服务(六):客户端基础库 TS 实战

简介: Go+gRPC-Gateway(V2) 微服务实战,小程序登录鉴权服务(六):客户端基础库 TS 实战

前端底层初步搭建(SDK)



新建 client/miniprogram/service/sdk.ts 文件,来初步搭建一下我们前端的底层公共设施。

定义一个 SDK na

mespace


export namespace SDK {
}


定义相关常量 & Interface


const serverAddr = 'http://localhost:8080'
const AUTH_ERR= 'AUTH_ERR'
const authData = {
    token: '',
    expiryMs: 0
}
interface RequestOption<REQ, RES> {
    method: 'GET'|'PUT'|'POST'|'DELETE'
    path: string
    data: REQ
    respMarshaller: (r: object)=>RES
}
interface AuthOption {
    attachAuthHeader: boolean
    retryOnAuthError: boolean
}


这里主要根据当前需求,做了如下事情:


  • 抽出服务器地址 serverAddr
  • 定义一个授权失败 401 ❌常量
  • token 相关暂时存到内存中
  • 定义客户端 wx.request 所必须的参数类型
  • 控制授权请求相关逻辑(是否附加 Auth Header & 重试等)


wx.login 改写成 Promise 形式


export function wxLogin(): Promise<WechatMiniprogram.LoginSuccessCallbackResult> {
        return new Promise((resolve, reject) => {
            wx.login({
                success: resolve,
                fail: reject,
            })
        })
    }


请求公共逻辑 wx.request 编写


export function sendRequest<REQ, RES>(o: RequestOption<REQ, RES>, a: AuthOption): Promise<RES> {
        const authOpt = a || {
            attachAuthHeader: true,
        }
        return new Promise((resolve, reject) => {
            const header: Record<string, any> = {}
            if (authOpt.attachAuthHeader) {
                if (authData.token && authData.expiryMs >= Date.now()) {
                    header.authorization = 'Bearer '+ authData.token
                } else {
                    reject(AUTH_ERR)
                    return
                }
            }
            wx.request({
                url: serverAddr + o.path,
                method: o.method,
                data: o.data,
                header,
                success: res => {
                    if(res.statusCode === 401) {
                        reject(AUTH_ERR)
                    } else if (res.statusCode >= 400) {
                        reject(res)
                    } else {
                        resolve(
                            o.respMarshaller(
                                camelcaseKeys(res.data as object, { deep: true }),
                            )
                        )
                    }
                },
                fail: reject
            })
        })
    }


登录模块(login)编写


export async function login() {
    if (authData.token && authData.expiryMs >= Date.now()) {
        return 
    }
    const wxResp = await wxLogin()
    const reqTimeMs = Date.now()
    const resp = await sendRequest<auth.v1.ILoginRequest, auth.v1.ILoginResponse>({
        method: "POST",
        path: "/v1/auth/login",
        data: {
            code: wxResp.code,
        },
        respMarshaller: auth.v1.LoginResponse.fromObject
    }, {
        attachAuthHeader: false, 
        retryOnAuthError: false,
    })
    authData.token = resp.accessToken!
    authData.expiryMs = reqTimeMs + resp.expiresIn! * 1000
}


业务请求自动重试模块编写


export async function sendRequestWithAuthRetry<REQ, RES>(o: RequestOption<REQ, RES>, a?: AuthOption): Promise<RES> {
    const authOpt = a || {
        attachAuthHeader: true,
        retryOnAuthError: true,
    }
    try {
        await login()
        return sendRequest(o, authOpt)
    } catch(err) {
        if(err === AUTH_ERR && authOpt.retryOnAuthError) {
            authData.token = ''
            authData.expiryMs = 0
            return sendRequestWithAuthRetry(o, {
                attachAuthHeader: authOpt.attachAuthHeader,
                retryOnAuthError: false
            })
        } else {
            throw err
        }
    }
}


Todo Service



客户端具体服务层,这里是 Todo 这个服务。

我们新建一个文件控制客户端相关逻辑:client/miniprogram/service/todo.ts


创建一个 Todo


export namespace TodoService {
    export function CreateTodo(req: todo.v1.ICreateTodoRequest): Promise<todo.v1.ICreateTodoResponse>{
        return SDK.sendRequestWithAuthRetry({
            method: "POST",
            path: "/v1/todo",
            data: req,
            respMarshaller: todo.v1.CreateTodoResponse.fromObject
        })
    }
}


相关文章
|
Linux Go iOS开发
Go语言100个实战案例-进阶与部署篇:使用Go打包生成可执行文件
本文详解Go语言打包与跨平台编译技巧,涵盖`go build`命令、多平台构建、二进制优化及资源嵌入(embed),助你将项目编译为无依赖的独立可执行文件,轻松实现高效分发与部署。
1810 162
|
存储 前端开发 JavaScript
Go语言实战案例-项目实战篇:编写一个轻量级在线聊天室
本文介绍如何用Go语言从零实现一个轻量级在线聊天室,基于WebSocket实现实时通信,支持多人消息广播。涵盖前后端开发、技术选型与功能扩展,助你掌握Go高并发与实时通信核心技术。
1117 158
|
数据采集 数据挖掘 测试技术
Go与Python爬虫实战对比:从开发效率到性能瓶颈的深度解析
本文对比了Python与Go在爬虫开发中的特点。Python凭借Scrapy等框架在开发效率和易用性上占优,适合快速开发与中小型项目;而Go凭借高并发和高性能优势,适用于大规模、长期运行的爬虫服务。文章通过代码示例和性能测试,分析了两者在并发能力、错误处理、部署维护等方面的差异,并探讨了未来融合发展的趋势。
1323 0
|
数据采集 Go API
Go语言实战案例:使用context控制协程取消
本文详解 Go 语言中 `context` 包的使用,通过实际案例演示如何利用 `context` 控制协程的生命周期,实现任务取消、超时控制及优雅退出,提升并发程序的稳定性与资源管理能力。
711 152
|
Cloud Native Serverless API
微服务架构实战指南:从单体应用到云原生的蜕变之路
🌟蒋星熠Jaxonic,代码为舟的星际旅人。深耕微服务架构,擅以DDD拆分服务、构建高可用通信与治理体系。分享从单体到云原生的实战经验,探索技术演进的无限可能。
1079 4
微服务架构实战指南:从单体应用到云原生的蜕变之路
|
监控 Cloud Native Java
Spring Boot 3.x 微服务架构实战指南
🌟蒋星熠Jaxonic,技术宇宙中的星际旅人。深耕Spring Boot 3.x与微服务架构,探索云原生、性能优化与高可用系统设计。以代码为笔,在二进制星河中谱写极客诗篇。关注我,共赴技术星辰大海!(238字)
1589 2
Spring Boot 3.x 微服务架构实战指南
|
负载均衡 监控 Java
微服务稳定性三板斧:熔断、限流与负载均衡全面解析(附 Hystrix-Go 实战代码)
在微服务架构中,高可用与稳定性至关重要。本文详解熔断、限流与负载均衡三大关键技术,结合API网关与Hystrix-Go实战,帮助构建健壮、弹性的微服务系统。
1142 1
微服务稳定性三板斧:熔断、限流与负载均衡全面解析(附 Hystrix-Go 实战代码)
|
安全 Go 开发者
Go语言实战案例:使用sync.Mutex实现资源加锁
在Go语言并发编程中,数据共享可能导致竞态条件,使用 `sync.Mutex` 可以有效避免这一问题。本文详细介绍了互斥锁的基本概念、加锁原理及实战应用,通过构建并发安全的计数器演示了加锁与未加锁的区别,并封装了一个线程安全的计数器结构。同时对比了Go中常见的同步机制,帮助开发者理解何时应使用 `Mutex` 及其注意事项。掌握 `Mutex` 是实现高效、安全并发编程的重要基础。
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
603 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
551 0
在线课堂+工具组件小程序uniapp移动端源码