Link Search Menu Expand Document

定义Callback Route

  1. React
  2. Vue2.0
  3. Vue3.0

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

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

代码的示例如下:

React

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

function App() {
  const oneAuth = ()
  return (
    <BrowserRouter>
      <div className="App">
        <Security oneAuth={oneAuth}>
          <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

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

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

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

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

Vue3.0

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

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

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

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

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

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

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

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