react的路由守卫，路由鉴权，路由守卫的封装

1.在component下新建一个gradRoute.js的文件，并输入如下内容

import { getToken } from "../API";
import { Navigate } from 'react-router-dom'export default function GardRoute({ children }) {//获取tokenconst isToken = getToken()if (isToken) {//如果有token，那就去往该组件包裹的页面return <>{children}</>}else {//跳转去登录页面return <Navigate to='/login' replace />}
}

2.在路由表下使用

import { Navigate } from 'react-router-dom'
import Login from '../pages/Login'
import Layout from '@/pages/Layout/'
import GardRoute from '../component/gardRoute'const indexRouter = [{path: '/layout',//这里的layout就是对应的childrenelement: <GardRoute><Layout /></GardRoute>,},{path: '/',element: <Navigate to='/login' />},{path: '/login',element: <Login />},
]export default indexRouter

react的路由守卫，路由鉴权，路由守卫的封装相关推荐

react路由鉴权 / 路由守卫
react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情况下去判断是否登录总的来说就是 ...
react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）
react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情况下去判断是否登录总的来说就是 ...
vue-router的鉴权、守卫
一.什么是vue-router vue-router是路由导航守卫,又叫路由的钩子函数或者路由的生命周期函数. 就是路由从开始进入路径到跳转结束这个过程中,到了某个阶段会自动执行的函数. 原理: 路由 ...
React + UmiJS: 实现简单登录鉴权
在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录,只是通过postman进行了测试,本篇以此为基础通过reactjs和um ...
Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)
欢迎来到我的博客
vue router 路由鉴权（非动态路由）
概述角色:超级管理员.主题管理员.数据服务管理员权限: 超级管理员:所有页面主题管理员:基础公共页面+主题设置页数据服务管理员:基础公共页面+数据服务设置页+数据服务审批页需求:角色菜单来自 ...
详解比springSecurity和shiro更简单优雅的轻量级Sa-Token框架，比如登录认证,权限认证,单点登录,OAuth2.0,分布式Session会话,微服务网关鉴权
文章目录 1. 技术选型 2. Sa-Token概述 2.1 简单介绍 2.2 登录认证 2.3 权限认证 3. 功能一览 4. Sa-Token使用 4.1 引入Sa-Token依赖 4.2 Sa- ...
react 路由鉴权
react 路由鉴权:就相当于vue里面的 beforeRouter 路由守卫,如果没有登录就不会让用户进到首页,并且会重定向到登录页. // 在 components 文件夹下新建 AuthComp ...
dispatch作用 react_「React系列」手把手带你撸后台系统（Redux与路由鉴权）
[React系列]手把手带你撸后台系统(Redux与路由鉴权) 来源:https://juejin.im/post/5d9b5ddee51d45781b63b8f7 上一篇我们介绍了系统架构,这一篇将 ...
快速搭建一个网关服务，动态路由、鉴权看完就会（含流程图）
[文章来源]https://sourl.cn/tcbSPi 前言本文记录一下我是如何使用Gateway搭建网关服务及实现动态路由的,帮助大家学习如何快速搭建一个网关服务,了解路由相关配置,鉴权的流 ...

react的路由守卫，路由鉴权，路由守卫的封装

1.在component下新建一个gradRoute.js的文件，并输入如下内容

react的路由守卫，路由鉴权，路由守卫的封装相关推荐

最新文章

热门文章