Vue 模式接入

Vue 模式提供 RootAuth 完整的 UI 页面（登录、注册、重置密码），方便您快速接入。仅支持 Vue 3 框架。同时该实例也包含 API 模式中的所有方法（如 getToken、setLocale 等）。

1. 准备工作

在 RootAuth 工作台 创建应用，并复制 app_id（格式如 app_******）。

2.前置条件

请在项目根目录的 .npmrc 文件中添加下面这行配置：

@rootauth:registry=http://gitlab.standard-software.co/api/v4/projects/12421/packages/npm/

3. 安装依赖包

npm install @rootauth/vue vue vue-router

4. 创建实例并挂载路由

在入口文件 main.js 中：

// main.js
import type { Router, RouteRecordRaw } from 'vue-router'
import { RootAuthClient, type RootAuthClientConfig } from '@rootauth/vue'

const options: RootAuthClientConfig = {
    app_id: 'app_******', // 必填项，值为工作台创建应用生成的app_id
}
const client = new RootAuthClient(options)
client.install(router)

4.1 完整配置项

Vue 模式支持以下特有参数：

 interface RootAuthClientConfig {
  app_id: string // 必填项，从工作台应用配置获取
  /** hosted模式下路由基础路径，如 '/auth' 则路由为 /auth/login、/auth/register、/auth/reset-password 等；不传则从站点根路径 / 开始 */
  base_path?: string
  api_base_url?: string // 请求后端api接口的路径，默认为https://rootauth-api.rootauth.com
  redirect_uri?: string // 登录成功后跳转的路径，默认为根路径location.origin
  state?: string // 自定义参数，原样在接口返回
  locale?: string // 传入当前语言，默认为zh-CN，当前支持zh-CN、en-US
  scope?: string[]  // scope映射关系，默认为['openid']，想要获取头像、用户名等，在该字段添加email、username
  grant_type?: string // 授权模式，默认为authorization_code
  enable_google_one_tap?: boolean // 是否开启Google Onetap登陆，默认为false
  /** hosted模式登录成功回调；返回 false 时不执行默认跳转 */
  onLoginSuccess?: LoginSuccessCallback;
  /** hosted模式注册成功回调；返回 false 时不执行默认跳转 */
  onRegisterSuccess?: RegisterSuccessCallback;
}

5. 查看合并后的路由

client.getSdkRoutes()

6. 卸载 SDK

当不再需要认证功能时，可手动卸载释放内存：

client.unmount()

const options: RootAuthClientConfig = {
  app_id: 'app_******', // 必填项，值为工作台创建应用生成的app_id
  enable_google_one_tap: true // 设为true才能开启one tap登陆
}
const client = new RootAuthClient(options)

client?.googleOneTapLogin()

8. 其他方法

Vue 模式的客户端实例同样支持以下方法（用法同 API 模式）：