定义Callback Route

React
Vue2.0
Vue3.0

关于XAuth托管流程，详细请查看XAuth-Hosted FLow。关于选择托管流还是嵌入方式，详情查看 Hosted Vs Embedded.

回到Callback Route，是指用户在通过XAuth的验证后，XAuth调用您的应用的路径，称为回调路由或重定向URI。该路径是不向用户显示的，也不是用户的最终访问页面路径，只是身份信息重定向的一个接收地址。

代码的示例如下：

React

import './App.css'
import { Security, LoginCallback, SecurityRoute } from '@XAuth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { About } from './about'

function App() {
  const XAuth = ()
  return (
    <BrowserRouter>
      <div className="App">
        <Security XAuth={XAuth}>
          <button onClick={login}>Login</button>
          <br />
          <Link to="/home">Home</Link>
          <Link to="/about">About</Link>
          <Route path="/home">
            <h1>Home</h1>
          </Route>
          <Route path="/about">
            <h1>About</h1>
          </Route>
          <Route path="/callback">
            <LoginCallback />
          </Route>
        </Security>
      </div>
    </BrowserRouter>
  )
}

export default App

Vue2.0

从@XAuth/sdk-vue 得到登录重定向页面，并配置到路由中。

路由的路径需要与后续初始化@XAuth/sdk-core 的实例化参数redirectUri一致。

import { LoginCallback } from "@XAuth/sdk-vue";

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
];

Vue3.0

从@XAuth/sdk-vue-next 得到登录重定向页面，并配置到路由中。

路由的路径需要与后续初始化@XAuth/sdk-core 的参数redirectUri一致。

import { LoginCallback } from "@XAuth/sdk-vue-next";

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
];

定义一个 login/callback的路径: React的操作方法React Router, Vue的操作方法Vue Router

这里的示例使用 ` /callback `作为默认的路由路径。我们这里先定义它，在后续的步骤里会用到。

正常来说，你的应用负责解析发送到此回调路由的信息。XAuth的 SDK 会为您执行此操作（稍后在处理 XAuth的回调中进行介绍）。

注意：回调路由的完整 URL 代表真实 URL 很重要（换句话说，即使在浏览器重新加载之后，它也应该为您的单页应用程序提供服务）,大多数路由器组件默认执行此操作。