Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)_react路由守卫做权限管理-程序员宅基地

技术标签: react.js  【前端基础】--克莱因  前端  vue.js  javascript  

在这里插入图片描述

欢迎来到我的博客
博主是一名大学在读本科生,主要学习方向是前端。
目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
目前正在学习的是 R e a c t 框架 React框架 React框架,中间穿插了一些基础知识的回顾
博客主页codeMak1r.小新的博客

本文被专栏【React–从基础到实战】收录

坚持创作️,一起学习,码出未来‍!

路由导航守卫

本节目标: 能够实现未登录时访问拦截并跳转到登录页面(路由鉴权实现)

1. React项目中

实现思路

自己封装 AuthRoute 路由鉴权高阶组件,实现未登录拦截,并跳转到登录页面

思路为:判断本地是否有token,如果有,就返回子组件,否则就重定向到登录Login

实现步骤

  1. 在 components 目录中,创建 AuthRoute/index.js 文件
  2. 判断是否登录
  3. 登录时,直接渲染相应页面组件
  4. 未登录时,重定向到登录页面
  5. 将需要鉴权的页面路由配置,替换为 AuthRoute 组件渲染

代码实现

components/AuthRoute/index.js

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

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

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

注:utils工具函数getToken如下

// 从localstorage中取token
const getToken = () => {
     
return window.localStorage.getItem(key)
}

src/routes/index.js路由表文件

import Layout from "@/pages/Layout";
import Login from "@/pages/Login";
import {
     AuthRoute } from "@/components/AuthRoute";

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

2. Vue项目中

实现思路

在Vue的router路由表文件中,存在官方封装好的API:beforeEach

代码实现

/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

代码解释:
router.beforeEach用来设置Vue的路由导航守卫(路由拦截),其接收一个回调函数作为参数。
在回调函数内部,接收三个参数,顺序分别是:to , from , next
to代表将要访问的路径
from代表从哪个路径跳转而来
next是一个函数,表示放行
next() => 放行next('/login') => 强制跳转到login页面

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Svik_zy/article/details/126337429

智能推荐

Java - Java8中字符串拼接效率问题_jdk 8 string用加号拼接速度-程序员宅基地

文章浏览阅读260次。Java8中字符串拼接效率问题问题来源测试方法与测试用例JMH测试结果分析完整测试程序一:问题来源在某开源框架中自定义了StringUtils类,其中的getUUID很惹人注目:public static String getUUID(){ String s = UUID.randomUUID().toString(); return s.substring(0,8) + s.substring(9,13) + s.substring(14,18) + s.substri_jdk 8 string用加号拼接速度

java物业收费管理系统源码_基于java+swing+mysql的物业小区收费管理系统-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏8次。运行环境: 最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。IDE环境: Eclipse,Myeclipse,IDEA都可以硬件环境: windows 7/8/10 2G内存以上(推荐4G,4G以上更好)可以实现: 管理员角色包含以下功能:小区信息增删改查,楼宇信息增删改查,业主的房屋增删改查,物业费的单价录入,业主电表煤气计费,小区公共数据录入,查看收费报表,查看用...

mobilenetv1\v2\v3-程序员宅基地

文章浏览阅读70次。https://www.cnblogs.com/ywheunji/p/12532631.html

数论学习笔记-初等数论基础(最先阅读)-程序员宅基地

文章浏览阅读1k次,点赞5次,收藏19次。初等数论笔记文章目录初等数论笔记前言一、什么是整除?二、唯一分解定理1.定义2.正确性证明三、约数前言这篇博客主要内容包括:整除概念,唯一分解定理,约数个数,约数和,筛质数,分解质因数一、什么是整除?如果n%d==0,那么n是d的倍数,d是n的约数,即d能整除n,即为d∣n如果n \% d==0,那么n是d的倍数,d是n的约数,即d能整除n,即为d|n如果n%d==0,那么n是d的倍数,d是n的约数,即d能整除n,即为d∣n下面给出整除的一些性质a∣b,b∣c=>a∣c _初等数论

PMP证书在国内已经泛滥了,大家怎么看?_pmp证书会被盗用吗-程序员宅基地

文章浏览阅读1.2k次。PMP 近年的报考人数逐年递增,很多人担心都考了 PMP 证,是不是就不值钱了。不用太过担心,目前为止 市场对 PMP 的需求量依然很高,预计到 2027 年 我国的项目管理岗位人才缺口将达到 4600万。_pmp证书会被盗用吗

ArcGIS 路网密度制作_arcgis密度如何转栅格-程序员宅基地

文章浏览阅读2w次,点赞34次,收藏243次。ArcGIS 路网密度制作前言路网密度概念所需数据目标ArcGIS操作步骤前言路网密度概念路网密度等于某一计算区域内所有的道路的总长度与区域总面积之比,单位为千米每平方千米.所需数据某地区道路数据(线矢量图层)目标制作道路密度格网数据/栅格数据,本次研究区域以苏州市为例ArcGIS操作步骤本次研究区域为苏州市,加载苏州市地图、道路网络,因为后续要计算几何(长度、面积等),因此,这里对所有数据进行统一投影。2. 创建渔网,也即格网,后续也可以将该格网数据转为栅格,创建栅格道路密度图。_arcgis密度如何转栅格

随便推点

深度学习(六)——反向传播计算w对应的梯度_2、请计算反向传播时,参数w1的梯度值。-程序员宅基地

文章浏览阅读696次。如下图,从下往上是第一阶段,第二阶段是从上往下上图总结如下图上图中正向传播过程是绿色的数字,从左导右上图中反向传播(红色数字,从右到左),算法:求偏导之后将x代入算出结果,比如第一个结点1/x,它的偏导公式在上图中有,把1.37代入得-0.53,注意这里不是把0.73也不是把1当x代入,而是把1.37代入,因为x本来就是1.37,1/1.37才等于0.73,所以x是1.37,依次..._2、请计算反向传播时,参数w1的梯度值。

Angularjs中的缓存以及缓存清理_iis 优化angular缓存-程序员宅基地

文章浏览阅读3.6k次。写在最前面:这篇博文是2篇文章组成,详细介绍了Angularjs中的缓存以及缓存清理,文章由上海尚学堂转载过来,欢迎大家阅读和评论。转载请注明出处,谢谢! 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复,消耗时间。因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多。 1、 $cacheFactory..._iis 优化angular缓存

ViewDragHelper解读_消失的卡片view位置重置,由于大多手机会重新调用onlayout函数,所以此处大可以不做-程序员宅基地

文章浏览阅读1.5k次。精彩推荐Android ViewDragHelper完全解析 自定义ViewGroup神器 模仿探探首页卡片左右滑动效果,滑动流畅,卡片view无限重生案例效果图案例注释public class SlideLayout extends ViewGroup { private List viewList = new ArrayList<>(); // 存放的是每一_消失的卡片view位置重置,由于大多手机会重新调用onlayout函数,所以此处大可以不做

关于如何添加cell右滑删除的功能_u-cell-group 右划删除-程序员宅基地

文章浏览阅读2.3k次。@interface SmartHome_MainViewController ()UITableViewDelegate,UITableViewDataSource>@property (weak, nonatomic) IBOutletUITableView *MainTableView;@property(strong,nonatomic)NS_u-cell-group 右划删除

matlab2018a详细安装教程_xax18-程序员宅基地

文章浏览阅读4k次。MATLAB2018是由MathWorks公司出品的一款著名的商业数学软件,主要用于算法开发、数据分析、数据可视化,和Mathematica、Maple并称为三大数学软件。MATLAB提供包括矩阵计算、绘制函数及数据图像等功能,主要应用于工程计算、控制设计、信号处理与通讯、图像处理、信号检测、金融建模设计与分析等领域,可以进行矩阵运算、绘制函数和数据、实现算法、创建用户界面、连接其他编程语言的程序等,MATLAB允许矩阵操作,函数和数据绘图,算法实现,用户界面创建,以及与..._xax18

games101,作业2_games101作业超采样代码-程序员宅基地

文章浏览阅读516次。需要补充的函数rasterize_triangle(): 执行三角形栅格化算法static bool insideTriangle(): 测试点是否在三角形内。你可以修改此函 数的定义,这意味着,你可以按照自己的方式更新返回类型或函数参数。判断点是否在三角形内若三角形ABC中有一点p,则AP x AB, BP x BC,CP x CA三个向量的叉乘方向相同。若在平面上,则两向量叉乘方向平行z轴,为正为负取决于屏幕坐标向内为正为负。代码Eigen::Vector2f p; p <&_games101作业超采样代码

推荐文章

热门文章

相关标签