React/Vue はルーティング認証/ナビゲーション ガード/ルーティング インターセプトを実装します

Vue /React はルーティング認証/ナビゲーション ガード/ルーティング インターセプトを実装します (react-router v6)

1.反応 プロジェクト

1. 実装アイデア

AuthRoute ルーティング認証の上位コンポーネントを独自にカプセル化し 、非ログインインターセプトを実現し、ログインページへジャンプ

アイデアは、ローカルにトークンがあるかどうかを判断し、トークンがある場合はサブコンポーネントを返し、そうでない場合はログインにリダイレクトします。

2. 導入手順

1. コンポーネント ディレクトリに、AuthRoute/index.js ファイルを作成します。

2. ログインするかどうかを決定する

3. ログイン時に、対応するページコンポーネントを直接レンダリングします

4. ログインしていない場合はログインページにリダイレクトします

5. 認証を必要とするページ ルーティング設定を AuthRoute コンポーネント レンダリングで置き換えます。

3. コードの実装

/src/routes/AuthRoute.js

// 路由鉴权
// 1. 判断token是否存在
// 2. 如果存在 直接正常渲染
// 3. 如果不存在 重定向到登录路由

import { Navigate } from "react-router-dom";
// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件
// 这里的AuthRoute就是一个高阶组件

function AuthRoute({ children }) {
  // 获取token
  const tokenStr = window.localStorage.getItem('token');
  // 如果token存在 直接正常渲染
  if (tokenStr) {
    return <>{children}</>
  }
  // 如果token不存在，重定向到登录路由
  else {
    return <Navigate to='/login' replace />
  }
}
{/*
 <AuthRoute> <Layout /> </AuthRoute> 
 登录：<> <Layout /> </>
 非登录：<Navigate to="/login" replace />
*/ }
function LoginRoute({ children }) {
  const token = window.localStorage.getItem('token');
  if (token) {
    return <Navigate to="/" replace></Navigate>;
  } else {
    return <>{children}</>;
  }
}
export { AuthRoute,LoginRoute }

src/routes/index.js ルーティング テーブル ファイル

import Layout from "@/pages/Layout";
import Login from "@/pages/Login";
import { AuthRoute ,LoginRoute} from "@/routes/AuthRoute";

// eslint-disable-next-line
export default [
  // 不需要鉴权的组件Login
  {
    path: "/login",
    element: <LoginRoute>
                <Login />
             </LoginRoute>
  },
  // 需要鉴权的组件Layout
  {
    path: "/",
    element: <AuthRoute>
      <Layout />
    </AuthRoute>
  }
]

2.  Vueプロジェクト内

1. 実装アイデア

Vue のルーター ルーティング テーブル ファイルには、公式にパッケージ化された API がありますbeforeEach。

2. コードの実装

/src/ルーター/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 路由懒加载
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
Vue.use(VueRouter)
const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path: "/welcome", component: Welcome }
    ]
  }
]
const router = new VueRouter({
  routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to代表将要访问的路径
  // from代表从哪个路径跳转而来
  // next是一个函数，表示放行
  //    next() 放行   next('/login') 强制跳转到login页面
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

3. コードの説明:

• router.beforeEach は、コールバック関数をパラメーターとして受け取る Vue のルート ナビゲーション ガード (ルート インターセプト) を設定するために使用されます。

• コールバック関数内では、to、from、next の 3 つのパラメータが順番に受信されます。

• to はアクセスするパスを表します

• from はどのパスからジャンプするかを表します

• 次はリリースを意味する関数です

• next() => 解放、next('/login') => 強制的にログインページにジャンプ