React项目进入系统后直接重定向到登录页面

最新推荐文章于 2024-04-30 09:20:11 发布
最新推荐文章于 2024-04-30 09:20:11 发布
阅读量1w 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013455430/article/details/88035744
版权

我现在的项目进来后直接到的是控制台页面，可需求上要求直接进来后需要到登陆页面，不登陆将无法使用系统

这里我踩了两个坑，一个是初始化路由时顺序的问题

如果将上面两个渲染的布局组件交换位置，就会导致登录页面在框架内使用，没有使用自己的组件渲染，如下图所示

还有一个问题就是重定向的，如果只输入本地服务地址和端口会直接跳转到控制台页面。

现在需要将它定位到登录页面，首先时在控制台的布局页面找到重定向的位置

然后将其修改为

发现刷新，或者直接输入链接后直接可以跳转到登陆页面，但是登陆后跳转不对，只能到登陆页面去找到登陆时的跳转路由，在action中修改登录成功后页面跳转路由

解决了这个问题还有个问题：如果点击回退按钮发现还是返回到控制台，而且并未退出登录，这个明天继续解决

The Dark Kinght
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React + UmiJS: 实现简单登录鉴权
泛泛之素
08-19 9526
在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录，只是通过postman进行了测试，本篇以此为基础通过reactjs和umijs架构编写一个前段登录界面，简单测试登录，页面如下功能： 登入，访问后端api获取token以及权限信息 登入后实现跳转 token信息和roles放入localStorage中 其他路由设置访问权限，通过wrappers进行权限判断 登出，擦除localStorage信息，跳转到login界面 技术栈
React项目架构+电商项目布局及代码
07-16
React 项目架构与电商项目布局 React 框架是当前最流行的前端框架之一，对于初学者来说，如何快速上手写一个项目是一个非常重要的问题。本文将为读者详细讲解 React 项目架构、电商项目布局及代码实现。 一、 ...
antdesignpro 重定向到登录页面_[译]React中的用户认证(登录态管理)
weixin_39730587的博客
11-02 425
[译]React中的用户认证(登录态管理)原文地址 ： https://kentcdodds.com/blog/authentication-in-react-applications 本文主要展示在当下 React 应用开发中，怎么使用 Context 和 Hooks 来管理用户的认证(也就是登录态)。先说结论下面是本文最终要实现的的简化版，方便大佬们直接看最后的效果：import 嗯，最终的代...
使用React和Ant Design实现登录页面
momi的专栏
04-30 950
使用React和Ant Design创建一个登录页面是一个很好的实践，可以让你的界面既美观又功能齐全。
react实现登录模拟拦截 实现记忆登录前路由登录后重定向到该路由
weixin_48864616的博客
02-24 1489
首先新建一个项目 yarn create vite Login-in --template react 下载 react-router-dom npm i react-router-dom 下载相应的包 yarn 重构项目 main.jsx import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' import { BrowserRouter} fr
使用umijs实现登录鉴权功能
菜鸟博客
07-16 6589
需求描述 进入某一个页面，如果鉴权失败，则跳转到登录页面进行登录，登录成功，返回之前的页面 实现方式 umijs官方文档，在 .umirc.js 自定义路由的时候，添加wrapper，实现鉴权拦截 然而折腾很久，还是没实现，于是用自己的方法实现 实现分析 首先写一个鉴权页面，鉴权成功加载页面，鉴权失败跳转登录页面，将这个页面包裹在项目的根组件外层 import React from 'react' import PropTypes from 'prop-types' import { Red.
React框架Umi实战(3)路由进阶
weixin_33719619的博客
01-16 1388
前面的课程都是使用的约定路由，就是自动生成的，但是我们做项目大部分都是涉及权限控制的，这时就还是得用控制路由，仅今天就来改进一下 1 修改配置.umirc.js // ref: https://umijs.org/config/ export default { plugins: [ // ref: https://umi...
umi 如何实现标签页切换和路由动效
在下月亮有何贵干
12-10 3138
目录全局路由示例 全局路由 在umi项目的src中创建loyouts，src/loyouts/index.js中编写一个react组件。 组件默认接收一个props属性为children，children将会默认渲染src/page/index.js下也就是umi的默认进入页，路由切换时等于是切换children部分。 剩下的部分可以全局渲染，因此可以把标签渲染在底部全局，children放在上方，就达到了点击下方标签，切换路由的效果。 示例 我示例使用的是antd-mobile v5.0.0-rc.3和r
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
09-30
总结一下，解决React项目在Nginx上直接输入路由路径导致404错误的方法是： 1. 更新Nginx配置中的`location`块，添加`try_files`指令。 2. `try_files`指令指明当请求的资源不存在时，返回`index.html`。 3. 保存配置...
使用react-router4.0实现重定向和404功能的方法
01-21
在开发中，重定向和404这种需求非常常见，使用React-router4.0可以使用Redirect进行重定向 最常用的就是用户登录之后自动跳转主页。 import React, { Component } from 'react'; import axios from 'axios'; ...
React+Django前后端分离系统的源代码片段或完整项目
最新发布
07-06
React+Django前后端分离系统的源代码片段或完整项目
基于React的在线测验系统源码+项目说明文档(前后端毕设项目).zip
02-16
基于React的在线测验系统源码+项目说明文档(前后端毕设项目).zip 基于React实现的在线测验系统 后端接口：https://download.csdn.net/download/DeepLearning_/87453876 目前实现的功能如下： 登录和注册 创建测验...
基于Springboot以及React的前后端分离项目系统结构xmind
05-20
基于Springboot以及React的前后端分离项目系统结构xmind
React学习项目-基于JavaScript的人事后台管理系统源码+运行说明.zip
06-20
React学习项目-基于JavaScript的人事后台管理系统源码+运行说明.zip 【1】项目代码完整且功能都经验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。 【2...
react 项目实战 使用react搭建酒店后端管理系统 第一讲 登录功能
04-10
react 项目实战 使用react搭建酒店后端管理系统 第一讲 登录功能 安装的插件 ： npm i react-router-dom npm i axiox npm ii antd npm i sass nom i md5
springboot+react前后端分离项目.zip
07-25
基于spring和react开发的前后端分离项目，后台使用springboot+hibernate+security等技术，前端使用react+axios+antd等框架，数据库使用mysql5.5+。项目已经开发了后台管理模块，包括用户、角色、组织、菜单、字典、...
公众号项目如何让没登录的用户点击页面操作都会跳转到登录react dva subscriptions
qq_36528523的博客
12-24 634
我们的公众号使用的技术栈是react+umi+dva pages下有用户不需要登录可访问的页面，也有页面是没登录情况下进行任何点击操作将会跳转到登录 于是就有了react dva subscriptions 使用教程指南 dva中我们可以在 Model 中实现事件监听， model 中的 subscriptions 相当于一个监听器，可以监听路由变化，鼠标，键盘变化，服务器连接变化，状态变化等，这样在其中就可以根据不同的变化做出相应的处理，在这个 subsriptions 中的方法名是随意定的，每次变
react中react-router路由重定向（登录成功后跳转到首页）& Redirect from react-router-dom
热门推荐
初心 - 杨瑞超个人博客
01-09 1万+
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 在react开发中，router是必不可少的，例如我们做登录功能时，登录成功之后，需要对页面重定向，这该怎么写呢，看看下面的代码就会一目了然~ import { Redirect } from 'react-router-dom' // 开始逻辑 if...
react 跨项目 重定向
07-28
要在React项目中实现跨项目重定向，可以使用`react-router-dom`库中的`Redirect`组件。以下是一个示例代码： 首先，确保你的React项目中已经安装了`react-router-dom`库： ``` npm install react-router-dom ``` 然后，在你的组件中，导入`Redirect`组件并使用它来实现重定向： ```jsx import React from 'react'; import { Redirect } from 'react-router-dom'; const CrossProjectRedirect = () => { // 在这里根据你的逻辑，判断是否需要进行重定向 const shouldRedirect = true; if (shouldRedirect) { // 要重定向到的目标URL const targetURL = 'https://example.com'; // 使用Redirect组件进行重定向 return <Redirect to={targetURL} />; } // 如果不满足重定向条件，返回你的组件内容 return ( <div> {/* ... */} </div> ); }; export default CrossProjectRedirect; ``` 在上面的示例中，我们使用了一个`shouldRedirect`变量来判断是否需要进行重定向。根据你的实际需求，你可以根据不同的条件来设置`shouldRedirect`的值。 如果`shouldRedirect`为`true`，则会使用`Redirect`组件将用户重定向到指定的`targetURL`。如果`shouldRedirect`为`false`，则会显示组件自身的内容。 请注意，在实际应用中，你可能需要将上述代码与路由配置结合使用，以确保重定向正常工作。这里只是一个简单示例，供参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值