【React】使用Token做路由权限控制

在这里插入图片描述
在components/AuthRoute/index.js中

import { getToken } from '@/utils'
import { Navigate } from 'react-router-dom'

const AuthRoute = ({ children }) => {
  const isToken = getToken()
  if (isToken) {
    return <>{children}</>
  } else {
    return <Navigate to="/login" replace />
  }
}

export default AuthRoute

src/router/index.js中

import { createBrowserRouter } from 'react-router-dom'

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
import AuthRoute from '@/components/AuthRoute'


const router = createBrowserRouter([
  {
    path: '/',
    element: <AuthRoute><Layout /></AuthRoute>,
  },
  {
    path: '/login',
    element: <Login />,
  },
])

export default router

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/728682.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Solr9 如何使用 DIH 读取数据库索引数据

使用 Solr 9 中的数据导入处理程序&#xff08;DIH&#xff09; DIH&#xff08;Data Import Handler&#xff09;提供了一种可配置的方式向 Solr 中导入数据。 从 Solr 9 开始&#xff0c;数据导入处理程序&#xff08;DIH&#xff09;已经不再直接包含在 Solr 中&#xff0c…

【Linux】关于在华为云中开放了端口后仍然无法访问的问题

已在安全组中添加规则: 通过指令: netstat -nltp | head -2 && netstat -nltp | grep 8080 运行结果: 可以看到服务器确实处于监听状态了. 通过指令 telnet 公网ip port 也提示: "正在连接xxx.xx.xx.xxx...无法打开到主机的连接。 在端口 8080: 连接失败"…

[WTL/Win32]_[中级]_[MVP架构在实际项目中的应用]

场景 在开发Windows和macOS的界面软件时&#xff0c;Windows用的是WTL/Win32技术&#xff0c;而macOS用的是Cocoa技术。而两种技术的本地语言一个主打是C,另一个却是Object-c。界面软件的源码随着项目功能增多而增多&#xff0c;这就会给同步Windows和macOS的功能造成很大负担…

数据驱动制造:EMQX ECP 指标监测功能增强生产透明度

迈向未来的工业生产&#xff0c;需要的不仅是自动化&#xff0c;更是智能化。如果工业企业的管理者能够实时监测每一生产环节的设备运行状态&#xff0c;每一数据点位情况&#xff0c;洞察和优化每一步生产流程&#xff0c;他们将能够做出更精准的决策&#xff0c;提高生产效率…

记录SpringBoot启动报错解决

记录SpringBoot启动报错解决 报错现场 Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be configured. Reason: Failed to determine a suitable driver class Action: Consider the following:If you want an embedde…

紧凑型计算微型仿生复眼

欢迎关注&#xff1a;GZH《光场视觉》 图1 研制的计算微型复眼的成像原理 1. 导读 微型曲面复眼由于具有大视场成像、大景深成像、体积较小的优势&#xff0c;在机器视觉、无人机导航、生物灵感机器人等领域引起了广泛关注。然而&#xff0c;传统的微型曲面复眼存在设计/加工…

44、基于深度学习的癌症检测(matlab)

1、基于深度学习的癌症检测原理及流程 基于深度学习的癌症检测是利用深度学习算法对医学影像数据进行分析和诊断&#xff0c;以帮助医生准确地检测癌症病变。其原理和流程主要包括以下几个步骤&#xff1a; 数据采集&#xff1a;首先需要收集包括X光片、CT扫描、MRI等医学影像…

Shiro721 反序列化漏洞(CVE-2019-12422)

目录 Shiro550和Shiro721的区别 判断是否存在漏洞 漏洞环境搭建 漏洞利用 利用Shiro检测工具 利用Shiro综综合利用工具 这一篇还是参考别的师傅的好文章学习Shiro的反序列化漏洞 上一篇也是Shiro的反序列化漏洞&#xff0c;不同的是一个是550一个是721&#xff0c;那么这…

基于SSM+Jsp的水果销售管理网站

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

技术速递|Java on Azure Tooling 5月更新 - Java 对 Azure 容器应用程序的入门指南支持

作者&#xff1a;Jialuo Gan 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎阅读 Java on Azure 工具 5 月份更新。在本次更新中&#xff0c;我们将介绍 Java 在 Azure 上的容器应用程序的入门指南。希望您喜欢这些更新&#xff0c;并享受使用 Azure 工具包的流畅体验。请下…

在4面体空间内2点结构占比

有一个4面体状空间&#xff0c;由3层甲烷状分子堆积而成&#xff0c;单个甲烷4面体边长10. 内有30个点&#xff0c;在30个点中取2点&#xff0c;有30*29/2435种取法。这里要求两个点的距离必须为6.123 在435个结构中只有40个符合要求 序数 结构 序数 结构 3 1 282 3 7…

如何利用AI大模型设计电机本体?

一、背景 AI在电机本体设计中的应用正逐渐成为提升设计效率、优化性能和降低成本的重要手段。通过深度学习、机器学习、计算机辅助设计&#xff08;CAD&#xff09;和仿真技术的结合&#xff0c;AI能够帮助工程师更快速准确地完成电机的设计与优化工作。以下是AI在电机本体设计…

会声会影2024旗舰版汉化最新安装包下载方法步骤

嗨&#xff0c;亲爱的CSDN的朋友们&#xff01;&#x1f389;今天&#xff0c;我要跟大家分享一款让你的视频编辑体验升级的神器——会声会影2024最新版本&#xff01;✨如果你是一个热衷于创作视频内容的创作者&#xff0c;那么你一定不能错过这个软件。它不仅功能强大&#x…

环境配置02:CUDA安装

1. CUDA安装 Nvidia官网下载对应版本CUDA Toolkit CUDA Toolkit 12.1 Downloads | NVIDIA Developer CUDA Toolkit 12.5 Downloads | NVIDIA Developer 安装配置步骤参考&#xff1a;配置显卡cuda与配置pytorch - 知乎 (zhihu.com) 2. 根据CUDA版本&#xff0c;安装cudnn …

子组件和父组件之间传值#Vue3#defineProps

子组件和父组件之间传值#Vue3#defineProps 效果&#xff1a; 6s执行项图片缩略图 子组件&#xff1a; <!-- 6s执行项详情图片的子组件 --> <template><div><imgv-if"itemsLocal.url":src"itemsLocal.url"style"width: 50px; …

2024届本科专业就业率排行:榜一遥遥领先,计算机跌出前五 计算机行业发展迅速,程序员应该学习哪种编程语言?

在大多数家庭中&#xff0c;选择大学专业时&#xff0c;他们更倾向于通过大学教育和专业学习来增强自身的竞争力&#xff0c;以便在未来的就业市场中获得一份既稳定又收入丰厚的工作。 在这种现实驱动下&#xff0c;家长们和学生们都倾向于关注那些就业率持续高企的专业&#…

第N5周:调用Gensim库训练Word2Vec模型

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 目录 本周任务: 1.安装Gensim库 2.对原始语料分词 3.停用词 4.训练Woed2Vec模型 …

示例:WPF中使用IsAsync的方式绑定数据来优化用户体验

一、目的&#xff1a;开发过程中&#xff0c;有时需要绑定大量数据&#xff0c;比如弹出一个窗口&#xff0c;窗口中包含一个ListBox绑定了大量数据&#xff0c;这时会出现点击按钮后出现假死卡顿影响用户体验&#xff0c;这理通过用IsAsync的方式将窗口优先弹出来再加载数据 二…

AWS Lambda + Flask 应用示例

前言 AWS Lambda 本身是一个以事件驱动的 Serverless 服务, 最简单的应用就是在入口函数中对接收到的事件/请求进行处理并返回响应. 对于像 Flask 这样的 Web 框架, 并不能直接在 Lambda 上提供服务, 不过我们可以借助 AWS Lambda Web Adapter 实现一个基于 Flask 框架的 Web …

ThinkPHP:查询数据库数据之后,更改查询数据的字段名称

一、原始查询数据 含有字段item_no&#xff0c;lot_num&#xff0c;position $data[brushed] db::table(wip_station_transaction) ->where([wip_entity_name>$wip_entity_name,line_code>$line_code,]) ->field([item_no, lot_num, position]) ->select(); …