npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xverse/auth

v0.1.5

Published

> BREAKING CHANGE: > 0.1.x 版本引入了破坏性更新, 使用 createAuthedHttp() 取代 new AuthH()

Downloads

3

Readme

鉴权模块

BREAKING CHANGE: > 0.1.x 版本引入了破坏性更新, 使用 createAuthedHttp() 取代 new AuthH()

Setup

  • 安装

使用 NPM 私服进行安装,需要在项目 package.json 目录下增加 .npmrc 用于指定 NPM 私服地址,详细参考 操作指引

npm install @xverse/auth@latest
  • 引入

如果使用模块引入

import { AuthClient } from '@xverse/auth'

new AuthClient('your_app_id')

如果需要直接从 JS 脚本引入

node_modules/@xverse/auth/lib/bundle.umd.js 拷贝到你的项目中并且加载

<script src="your_path_to/bundle.umd.js" >

那么会在 window 下暴露 XverseAuth 的全局变量,它上面挂载了所有导出的方法

new XAuth.AuthClient('your_app_id')

登录

通过 Auth 提供的登录方法会自动跳转到统一账号中心登录,登录完成后会跳转回业务方

  • 后端鉴权:使用带鉴权的 HTTP 模块

这种方法适用:所有接口都需要鉴权的情况下,它还要求:

  1. 返回的响应里包含 code 错误码,错误码为未登录(16
  2. 返回的响应里包含 data 字段带表响应数据
import { AuthedHttp } from '@xverse/auth'

export const http = createAuthedHttp({
  authAppId: 'xxx',
  onHttpError: message.error,
})

http.get({ url: 'api' })

上面的代码中,初始化 AuthedHttp 需要传入登录用的 AppId,需要向 @xiaweiyi 申请,onHttpError 是对错误码 非 0 的全局错误处理回调。

  • 后端鉴权:业务方自己判断登录态

这种方法适用于后端接口不返回 codedata 数据格式

import { AuthClient } from '@xverse/auth'

const authClient = new AuthClient('your_app_id')

if (错误码 === '未登录') {
  await authClient.jumpToSignIn()
}

通过后端错误码判断未登录调用 jumpToSignIn 方法即可

  • 仅前端鉴权

这种方法适用于后端不进行鉴权的业务,仅在进入页面时就进行一次判断,如果未登录会直接跳转到登录页面,注意它是异步的,需要等待 Promise resolve

import { AuthClient } from '@xverse/auth'

const authClient = new AuthClient('your_app_id')

await authClient.signIn()
// 登录后可以执行的操作

注意: 开发时需要将前端网页代理成 xverse.cn 域名才能生效,否则会无限跳转到登录中心。如何代理参考:https://doc.weixin.qq.com/doc/w3_m_FDriDXZfJdXs?scode=ABwAJwczAA4mhh3KGqAfQALAZuAGg

登出

直接调用 signOut 方法即可完成登出,异步调用完成后会刷新整个页面

import { AuthClient } from '@xverse/auth'

const authClient = new AuthClient('your_app_id')

await authClient.signOut()

查询用户信息

import { AuthClient } from '@xverse/auth'

const authClient = new AuthClient('your_app_id')

await authClient.getUserInfo()

上述的 authClient 建议都作为单例使用