[英]How to popup login screen(Azure AD) without using a button when accessing URL(local host in my case) directly?
我創建了一個基本的反應應用程序,我在其中實現了路由的概念,並且我使用了 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
function 而不是在單擊按鈕時,您可以在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.