Vue 模式接入

@rootauth/vue 为 Vue 3 提供 RootAuth hosted 完整认证页面，包括登录、注册、重置密码、MFA 和第三方登录。样式随 hosted 运行时自动加载，无需手动导入 CSS。

前置条件

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

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

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

1. 安装

npm install @rootauth/vue vue vue-router

要求 Vue ^3.4.0、Vue Router ^4.3.0。

2. 初始化

RootAuthClient 接收 API、应用、OIDC、Hosted 路径和成功回调配置。创建后的客户端可注册路由，也可直接挂载到 DOM 容器。

import { RootAuthClient } from '@rootauth/vue'

export const rootAuth = new RootAuthClient({
  app_id: 'your-app-id',
})

3. 配置参数

配置对象统一控制应用标识、API 地址、回调地址、路由前缀、语言和登录注册成功行为。

4. 接入 Vue Router

调用 install(router) 会向现有 Vue Router 添加登录、注册和重置密码路由，并避免重复注册。

import { createRouter, createWebHistory } from 'vue-router'
import { rootAuth } from './rootauth'

const router = createRouter({
  history: createWebHistory(),
  routes: [],
})

rootAuth.install(router)

SDK 会根据 base_path 注册登录、注册和重置密码等 hosted 路由，并避免重复添加同名路由。

以 base_path: '/auth' 为例，实际路由为：

登录和注册方式不通过客户端 type 配置，而由 RootAuth 后台应用开关决定。页面会按后台配置展示邮箱密码、邮箱验证码、手机号密码、手机号验证码或用户名密码方式。

如需先取得路由记录再自行合并：

const sdkRoutes = rootAuth.getSdkRoutes()

5. 回调示例

onLoginSuccess 和 onRegisterSuccess 可接收成功结果并覆盖默认跳转。回调返回 false 时，SDK 不再执行后续默认导航。

const rootAuth = new RootAuthClient({
  app_id: 'your-app-id',
  onLoginSuccess(data) {
    console.log('登录成功', data)
    return false
  },
  onRegisterSuccess(data) {
    console.log('注册成功', data)
  },
})

6. Core 能力

Vue 客户端继承 Core API，可直接调用 login()、sendCode()、register()、resetPassword()、verifyLoginMfa()、logout() 和第三方登录方法。包同时重新导出 @rootauth/core 的类型及辅助函数。

9. 相关模式

• @rootauth/core：无 UI API
• @rootauth/web-components：框架无关表单组件
• @rootauth/react：React 18+ hosted 完整页面