实施认证路由

特定的路由实施认证
React
Vue2.0
Vue3.0

在某些场景下中，您不需要所有的路由都需要认证，只是希望用户访问某些路由时必须登录。您可以只对特定路由的访问进行身份验证，或者对整个应用程序的所有路由访问进行身份验证。

对不需要身份验证的路由无需登录即可访问（称为匿名访问）。

注意：保护 SPA 中的路由并不能真正阻止用户访问应用程序的这些部分。毕竟，它是在浏览器中运行的 JavaScript，任何人都可以打开浏览器的开发人员工具并进行更改！

保护路由只是为了您的用户提供一致且良好的体验，比如有些电商的应用，无需用户登录，就可以浏览商品，而如果需要购买的时候，需要用户登录。但需要注意的是，真正的安全实施必须在您的单页应用程序调用的 API 中完成（请参阅使用访问令牌）。另请参阅保护您的 API 端点指南。

特定的路由实施认证

如果您希望某些路由只有用户仅在登录后才能访问，则只需要对这些路由进行身份验证。

React

以下给 about 页面添加鉴权，每次打开 about 页面时都会检查用户是否登录。

如果没有登录则会跳转到登录页，登录完成后会跳转回来。

import './App.css'
import XAuth from '@XAuth/sdk-core'
import { Security, LoginCallback, SecurityRoute } from '@XAuth/sdk-react'
import { BrowserRouter, Route, Link } from 'react-router-dom'
import { About } from './about'
function App() {
  const XAuth = new XAuth({
    issuer: `kang.xauth.cloud/oauth/v1`,
    clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
    redirectUri: `http://localhost:3000/callback`,
    scopes: ['openid', 'profile', 'email'],
  })
  const login = () => XAuth.login()
  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>
          <SecurityRoute path="/about">
            <About />
          </SecurityRoute>
          <Route path="/callback">
            <LoginCallback />
          </Route>
        </Security>
      </div>
    </BrowserRouter>
  )
}

export default App

Vue2.0

从@XAuth/sdk-vue 中获取导航守卫navigationGuard，并配置到路由中。

在需要鉴权的路由的 meta 中配置 auth 属性这样，在打开该路由时都会检查是否登录了。

如果没有登录则会跳转到登录页,登录完成后会跳转回来。

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

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
  {
    path: "/about",
    name: "About",
    meta: {
      auth: true,
    },
    component: () => import("../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach(navigationGuard);

export default router;

Vue3.0

从@XAuth/sdk-vue-next 中获取导航守卫navigationGuard，并配置到路由中。

在需要鉴权的路由的 meta 中配置 auth 属性，这样，在打开该路由时都会检查是否登录。

如果没有登录则会跳转到登录页，登录完成后会跳转回来。

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

const routes: Array<RouteConfig> = [
  {
    path: "/callback",
    component: LoginCallback,
  },
  {
    path: "/about",
    name: "About",
    meta: {
      auth: true,
    },
    component: () => import("../views/About.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach(navigationGuard);

export default router;