react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）

react路由鉴权 / 路由守卫
首先路由鉴权就是在访问一个页面时判断是否需要权限，比如电商App结算账单的时候需要登录用户的账号
路由守卫就是在该页面需要登录用户的情况下去判断是否登录
总的来说就是判断权限是鉴权判断是否登录就是守卫我那这个电商给大家举个例子项目的不同，要求不同，到时候根据需求去完成就行

下面是代码

创建一个SafeRouter.js文件

import React from 'react';
import {Redirect,Route} from 'react-router-dom';
const SafeRouter = ({ component: Component, ...rest }) => (<Route{...rest}render={props =>//判断是否登录  在登录页面登录成功的时候把用户名保存到本地Boolean(localStorage.getItem("isLogin")) ?(<Component {...props} />): (<Redirectto={{pathname: "/logins",//重定向到的网页位置state: { from: props.location }}}/>)}/>
);
export default SafeRouter

在需要鉴权的页面上引入这个SafeRouter.js文件

在写路由点击的时候可以把需要鉴权的route 换成你引入的文件SafeRouter 去包裹
代码如下

不需要守卫的情况下 用Route包裹
<Route  path="/detail" component={Detail}></Route>
不要守卫的情况下 用Route包裹
<SafeRouter path="/detail" component={Detail}></SafeRouter>

下面是我的一个组件中的路由判断不用复制，读懂就行

import React, { Component } from 'react'
import { BrowserRouter as Router, Route,Redirect } from 'react-router-dom'
import Index from "../pages/index/First"
import Logins from "../pages/logins/Login"
import Detail from "../pages/detail/Detail"
import SafeRouter from "./SafeRouter"
import Grade from "../pages/index/my/Grade"
export default class index extends Component {render() {return (<div className="content_router"><Router><SafeRouter path="/index/First" component={Index}></SafeRouter><Route path="/logins" component={Logins}></Route><SafeRouter path="/detail" component={Detail}></SafeRouter><SafeRouter path="/Grade" component={Grade}></SafeRouter>//从定向到首页<Redirect to="/index/First"></Redirect></Router></div>)}
}

————————————————
版权声明：本文为CSDN博主「Braking failure」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/z1902737007/article/details/103557873

react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）相关推荐

react路由鉴权 / 路由守卫
react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限,比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情况下去判断是否登录总的来说就是 ...
Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)
欢迎来到我的博客
react 路由鉴权
react 路由鉴权:就相当于vue里面的 beforeRouter 路由守卫,如果没有登录就不会让用户进到首页,并且会重定向到登录页. // 在 components 文件夹下新建 AuthComp ...
dispatch作用 react_「React系列」手把手带你撸后台系统（Redux与路由鉴权）
[React系列]手把手带你撸后台系统(Redux与路由鉴权) 来源:https://juejin.im/post/5d9b5ddee51d45781b63b8f7 上一篇我们介绍了系统架构,这一篇将 ...
vue router 路由鉴权（非动态路由）
概述角色:超级管理员.主题管理员.数据服务管理员权限: 超级管理员:所有页面主题管理员:基础公共页面+主题设置页数据服务管理员:基础公共页面+数据服务设置页+数据服务审批页需求:角色菜单来自 ...
java鉴权_3种常用鉴权方法原理与实现
学生一枚,作为学习和总结.如果有哪些不对的地方,还请指教 cookie 诞生 HTTP协议是无状态的协议.一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接. 为解决这个问 ...
vue-router的鉴权、守卫
一.什么是vue-router vue-router是路由导航守卫,又叫路由的钩子函数或者路由的生命周期函数. 就是路由从开始进入路径到跳转结束这个过程中,到了某个阶段会自动执行的函数. 原理: 路由 ...
jmeter接口测试获取token鉴权码和常用函数用法
一.登录获取token鉴权码 (1)添加一个HTTP请求--登录在请求下增加json提取器或正则表达式提取器---提取登录接口token接口鉴权码: 添加BeanShell后置处理程序: 将提取到的 ...
k8s-身份认证与权限认证鉴权准入控制- 各种方式带例子-推荐-2023
# 认证鉴权准入控制 ACL 了解原文:k8s认证.授权与准入控制 - 哪都通临时工 - 博客园 (cnblogs.com) 认证(Authentication):API Server 可以支持 ...

react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）

react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）相关推荐

最新文章

热门文章

react路由鉴权 / 路由守卫（常用经实践可行 推荐阅读）

react路由鉴权 / 路由守卫（常用经实践可行 推荐阅读）相关推荐

最新文章

热门文章

react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）

react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）相关推荐