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-umi-2-4.登录页
echo_Ae的博客
12-07 580
(⊙o⊙)…也确实没有设计天赋。。。登录页有点丑。 index.tsx import React from 'react'; import { history } from 'umi'; import { message } from 'antd'; import ProForm, { ProFormText } from '@ant-design/pro-form'; import { UserOutlined, LockOutlined } from '@ant-design/icons';
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中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...
重定向到登陆页面
Leon_Jinhai_Sun的博客
04-04 2976
重定向（登陆页面） * 登陆页面重定向 * 状态码302 应头location * 需求：登陆页面，用户名和密码的登陆页面，用户名和密码都是admin， 如果有一个不是，重定向到登陆页面，重新登陆。 // 设置302的状态码 response.setStatus(302); // 设置地址 response.setHeader("location", "/d...
react 判断是否登录，路由进行重定向
zhangqihang321的博客
08-14 901
react 判断是否登录，路由进行重定向 /*路由的重定向*/ //高阶组件 import React, {useContext, createContext, useState} from "react"; import { BrowserRouter as Router, Switch, Route, Link, //Redirect重定向组件 Redirect, useHistory, useLocation } from "react-
React项目架构+电商项目布局及代码
07-16
React 项目架构与电商项目布局 React 框架是当前最流行的前端框架之一，对于初学者来说，如何快速上手写一个项目是一个非常重要的问题。本文将为读者详细讲解 React 项目架构、电商项目布局及代码实现。 一、 ...
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-umi-2-2.多菜单以及登陆页
echo_Ae的博客
12-07 959
我们上篇都介绍了如何设置layout布局，这时候我要多个页面呢，还有登陆页是没有layout的咋弄？难道要跟之前一样在layout组件里面写个判断啥的？ no no no 用了umi3框架也是几行代码搞定 .umirc.ts import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, layout: { name: '
React + UmiJS: 实现简单登录鉴权
泛泛之素
08-19 9526
在之前的文章Spring WebFlux (7): Springboot Security+jwt登录鉴权实现了后端的鉴权登录，只是通过postman进行了测试，本篇以此为基础通过reactjs和umijs架构编写一个前段登录界面，简单测试登录，页面如下功能： 登入，访问后端api获取token以及权限信息 登入后实现跳转 token信息和roles放入localStorage中 其他路由设置访问权限，通过wrappers进行权限判断 登出，擦除localStorage信息，跳转到login界面 技术栈
react 默认路由的使用
m0_45877477的博客
07-30 723
默认路由: 进入页面时就会匹配的路由 (一进页面就会展示组件) path是空的: "/" (没有link、没有编程式导航)
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、付费专栏及课程。

余额充值