React/Vue implementa autenticación de enrutamiento/protección de navegación/intercepción de enrutamiento

Vue /React implementa autenticación de enrutamiento/protección de navegación/intercepción de enrutamiento (react-router v6)

1. Proyecto de reacción 

1. Idea de implementación

Encapsule  AuthRoute los componentes de alto nivel de la autenticación de enrutamiento usted mismo, realice la intercepción sin inicio de sesión y salte a la página de inicio de sesión

La idea es: juzgar si hay un token localmente, si es así, devolver el subcomponente, de lo contrario, redirigir a Iniciar sesión

2. Pasos de implementación

1. En el directorio de componentes, cree el archivo AuthRoute/index.js

2. Determinar si iniciar sesión

3. Al iniciar sesión, renderice directamente el componente de página correspondiente

4. Redirigir a la página de inicio de sesión cuando no haya iniciado sesión

5. Reemplace la configuración de enrutamiento de la página que requiere autenticación con la representación del componente AuthRoute

3. Implementación del código

/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 }

archivo de tabla de enrutamiento 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.  En el proyecto Vue

1. Idea de implementación

En el archivo de la tabla de enrutamiento del enrutador de Vue, hay una API empaquetada oficial: beforeEach.

2. Implementación del código

/src/router/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. Explicación del código:

• router.beforeEach se usa para configurar la protección de navegación de ruta de Vue (intercepción de ruta), que recibe una función de devolución de llamada como parámetro.

• Dentro de la función de devolución de llamada, se reciben tres parámetros en orden: a, desde, siguiente.

• to representa la ruta a la que se accede

• from representa de qué camino saltar

• la siguiente es una función que significa liberar

• next() => release, next('/login') => obligado a saltar a la página de inicio de sesión