Link Search Menu Expand Document

实施认证路由

  1. 特定的路由实施认证
  2. React
  3. Vue2.0
  4. Vue3.0

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

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

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

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

特定的路由实施认证

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

React

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

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

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

export default App

Vue2.0

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

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

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

import { LoginCallback, navigationGuard } from "@oneauth/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

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

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

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

import { LoginCallback, navigationGuard } from "@oneauth/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;