- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个基本的 React 应用程序,在其中实现了路由概念,并使用 Azure AD 进行身份验证。当我尝试使用登录按钮登录时,它工作正常,但我希望当我尝试访问主页时,它会自动重定向到登录页面(Microsoft 登录),而无需单击任何按钮。
这是我的“App.js”代码,在“AuthConfig”中我只是声明了我的 clientId、redirecturi、范围和权限。
import Prices from "./pages/Prices";
import Ticket from "./pages/Ticket";
import Money from "./pages/Money";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import {config} from "./AuthConfig";
import {PublicClientApplication} from '@azure/msal-browser';
import React from "react";
class App extends React.Component<any, any>{
publicClientApplication: PublicClientApplication;
constructor(props){
super(props);
this.state = {
error: null,
isAuthenticated: false,
user:{}
};
this.login=this.login.bind(this)
this.publicClientApplication = new PublicClientApplication({
auth:{
clientId: config.appId,
redirectUri: config.redirectUri,
authority: config.authority
},
cache:{
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false
}
});
}
async login(){
try{
await this.publicClientApplication.loginPopup(
{
scopes: config.scopes,
prompt:"select_account"
});
this.setState({isAuthenticated:true})
}
catch(err){
this.setState({
isAuthenticated:false,
user:{},
error:err
});
}
}
logout(){
this.publicClientApplication.logoutPopup();
}
render() {
return(
<div className="App">
{this.state.isAuthenticated ? <p>
<BrowserRouter>
<Routes>
<Route path="/" element={<Prices />} />
</Routes>
</BrowserRouter>
</p>:
<p>
<button onClick={() => this.login()} > Login </button>
</p>
}
<BrowserRouter>
<Routes>
<Route path="/Money" element={<Money />}></Route>
<Route path="/Ticket" element={<Ticket/>}></Route>
</Routes>
</BrowserRouter>
</div>
);
}
}
export default App;
最佳答案
如果您只是希望在安装 App
组件时而不是单击按钮时自动调用 login
函数,您可以在 componentDidMount 中执行此操作
生命周期方法。
示例:
class App extends React.Component<any, any> {
publicClientApplication: PublicClientApplication;
constructor(props) {
super(props);
this.state = {
error: null,
isAuthenticated: false,
user: {}
};
this.publicClientApplication = new PublicClientApplication({
auth: {
clientId: config.appId,
redirectUri: config.redirectUri,
authority: config.authority
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false
}
});
}
componentDidMount() {
this.login();
}
login = sync () => {
try {
await this.publicClientApplication.loginPopup({
scopes: config.scopes,
prompt: "select_account"
});
this.setState({ isAuthenticated: true });
} catch(err) {
this.setState({
isAuthenticated: false,
user: {},
error: err
});
}
}
logout() {
this.publicClientApplication.logoutPopup();
}
render() {
return(
<div className="App">
{this.state.isAuthenticated && (
<BrowserRouter>
<Routes>
<Route path="/" element={<Prices />} />
</Routes>
</BrowserRouter>
)}
<BrowserRouter>
<Routes>
<Route path="/Money" element={<Money />} />
<Route path="/Ticket" element={<Ticket />} />
</Routes>
</BrowserRouter>
</div>
);
}
}
我也不确定使用两个路由器会发生什么,您很可能希望合并这些路由器,以便所有路由都在同一个路由上下文中呈现。
示例:
<div className="App">
<BrowserRouter>
<Routes>
<Route
path="/"
element={this.state.isAuthenticated ? <Prices /> : null}
/>
<Route path="/Money" element={<Money />} />
<Route path="/Ticket" element={<Ticket />} />
</Routes>
</BrowserRouter>
</div>
关于reactjs - 直接访问 URL(在我的例子中为本地主机)时,如何在不使用按钮的情况下弹出登录屏幕(Azure AD)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74628115/
我在这里想做的是将所有连接转发到机器一上端口 3306 上的本地主机到本地主机上端口 3306 上的机器二。因此,如果您连接到机器一上的 mysql,它的行为就像您正在连接一样在二号机器上。 我认为
通过Kibana界面,如何获得 flex IP /主机? 我的意思是,与kibana连接的Elastic主机。 那有可能吗?我在这个上挣扎了好几个小时,却一无所获:( 附:不确定此问题是否是题外话,应
我知道这听起来很奇怪,但我有一个情况,Deno 需要关闭自己的主机(并因此杀死自己的进程)。这可能吗? 我特别需要这个用于 linux (lubuntu),如果相关的话。我想这需要 sudo 权限,这
我知道这听起来很奇怪,但我有一个情况,Deno 需要关闭自己的主机(并因此杀死自己的进程)。这可能吗? 我特别需要这个用于 linux (lubuntu),如果相关的话。我想这需要 sudo 权限,这
我有一个基本问题,但谷歌并没有为我产生很多结果(反正不是英文的)。基本上我想做的就是: 我有一个图形需要用作整个应用程序的持久 header ,例如:我不能让它在新的 Intent 调用时从屏幕上滑出
您好,我正在使用 xampp,我正在尝试使用 php 进行连接。 $sql_connections = mysql_connect("$server, $username, $password")
我目前正在尝试一些多人游戏的想法,并正在尝试创建一个 Java 应用程序来为基于网络浏览器的多人游戏提供服务。 我的开发环境是主机上的Eclipse, native 上的notepad + Googl
今天为大家分享一篇关于SSH 的介绍和使用方法的文章。本文从SSH是什么出发,讲述了SSH的基本用法,之后在远程登录、端口转发等多种场景下进行独立的讲述,希望能对大家有所帮助。 什么是SSH?
我已经完成了在裸机 Centos 7 上运行的测试 Kubernets 主机的设置。这将用作测试系统,因为我们将在 IBM Bluemix Kubernetes 服务中部署所有内容。 从 Bluemi
我正在尝试通过带有 4.2(果冻 bean )的 android 设备“nexus 7”通过 USB 与我的 freeduino 板进行通信,该板类似于 arduino uno。 几个月后,我使用开发
我正在使用 nginx,但在设置反向代理时遇到问题。 我的 nginx.conf 是默认的(没有对其进行任何更改),我的站点可用配置是: upstream backend_hosts { se
我在 projectlocker(免费 svn 主机)上有一个帐户,但我不知道如何将我的项目文件上传到它。 我在我的仪表板中找不到任何选项。 我在我的电脑上使用tortoiseSvn,那么如何上传文件
设置batchSize = 1有意义吗?如果我想一次处理一个文件? 尝试过batchSize = 1000和batchSize = 1 - 似乎具有相同的效果 { "version": "2.0"
我只想知道.. docker中现在有任何可用的工具吗?我已经阅读了Docker中有关多主机功能的一些文档,例如, Docker群 Docker服务(带有副本) 我也知道群模式下的volume问题,容器
我想将文件从 Docker 的容器挂载到我的 docker 主机。 数据卷不是我的解决方案,因为它们是从 docker 主机到 docker 容器的装载,我需要相反的方法。 谢谢 最佳答案 当 doc
我是新手。我无法正确理解RMI。互联网上有大量教程,但据我所知,它们都是针对本地主机的。服务器和客户端都运行在同一台机器上。 我想在任何计算机上运行客户端,并且主机将位于一台计算机上,让我们考虑IP
我无法从客户端“A”SSH 到服务器“B”(但我可以从同一子网上的许多其他 ssh 客户端而不是“A”——所有都是 *nux 机器) serverA>ssh -v -p 端口用户@serverB Op
设置batchSize = 1有意义吗?如果我想一次处理一个文件? 尝试过batchSize = 1000和batchSize = 1 - 似乎具有相同的效果 { "version": "2.0"
由于我不是天生的编码员,请多多包涵。 这是我尝试使用HAproxy来实现的目标,但是经过数小时的检查后,我无法以某种方式使其工作。 从 domain.com/alpha domain.com/beta
我正在使用 tomcat 运行 Java Web 应用程序,通过电子邮件将生成的报告发送给用户。我可以发送电子邮件,但几个小时后服务器停止发送电子邮件,并出现以下错误。 javax.mail.Mess
我是一名优秀的程序员,十分优秀!