學習ASP.NET Core Blazor編程系列二十五——登錄(4)

来源:https://www.cnblogs.com/chillsrc/archive/2023/02/12/17113633.html
-Advertisement-
Play Games

1前言 爬蟲一般都是用Python來寫,生態豐富,動態語言開發速度快,調試也很方便 但是 我要說但是,動態語言也有其局限性,筆者作為老爬蟲帶師,幾乎各種語言都搞過,現在這個任務並不複雜,用我最喜歡的C#做小菜一碟~ 2開始 之前做 OneCat 項目的時候,最開始的數據採集模塊,就是用 C# 做的, ...


學習ASP.NET Core Blazor編程系列文章之目錄 學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式(上)
學習ASP.NET Core Blazor編程系列三——實體 學習ASP.NET Core Blazor編程系列五——列表頁面 學習ASP.NET Core Blazor編程系列七——新增圖書 學習ASP.NET Core Blazor編程系列八——數據校驗 學習ASP.NET Core Blazor編程系列十三——路由(完) 學習ASP.NET Core Blazor編程系列十五——查詢 學習ASP.NET Core Blazor編程系列十六——排序 學習ASP.NET Core Blazor編程系列二十——文件上傳(完) 學習ASP.NET Core Blazor編程系列二十一——數據刷新  學習ASP.NET Core Blazor編程系列二十二——登錄(1)  

通過前面三篇文章的學習,我們雖然實現了登錄功能,但那還不是我們希望的登錄首頁。

我們希望的登錄功能,用戶在登錄圖書租賃系統的時候,如果沒有進行登錄是無法看到任何功能菜單,並且頁面一直顯示登錄頁面。

八、登錄首頁

      創建RedirectToLogin組件

     這個組件沒有其他任何作用,就是在未登錄時跳轉到登錄頁面。

   1. 在Visual Studio 2022的解決方案資源管理器中,滑鼠左鍵選中“Pages”文件夾,右鍵單擊,在彈出菜單中選擇“添加—>Razor組件…”,並將組件命名為“RedirectToLogin.razor”。

    2.在Visual Studio 2022的文本編輯器中打開RedirectToLogin.razor,我們來添加未登錄轉移到登錄頁面的代碼。具體代碼如下:

@inject NavigationManager NavigationManager

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        NavigationManager.NavigateTo("/Login", true);
    }
}

 

      3. 在Visual Studio 2022的文本編輯器中打開mainlayou.razor,我們修改組件中的登錄驗證相關的代碼。

      在前面的文章中我們在這個組件中添加了AuthorizeView這個Blazor自帶的一個授權組件,它內部處理了授權信息,內部有NotAuthorized、Authorized和Authorizing可供使用。

       NotAuthorized即未授權的情況,這種情況如果不寫,預設是顯示一行文字,Not Authorized。內部是一個RenderFragment,可以添加任何內容。

       Authorizing是正在進行授權認證,此時用來顯示相應的文字,我們使用Cookie認證的話一般不會有這種情況,但是如果我們使用統一認證,或者其他網路認證的時候,可能會有等待認證的時間,這時候我們提示信息就要寫在這裡。

    Authorized是用戶獲得了授權之後,在這裡可以顯示相應的內容。

      我們實現的是一個未登錄就跳轉到登錄頁面的功能,所以我們就在NotAuthorized的時候載入我們的RedirectToLogin的組件即可。具體代碼如下:

@using BlazorAppDemo.Pages
@inherits LayoutComponentBase
 
<PageTitle>BlazorAppDemo</PageTitle>
 
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <AuthorizeView>
            <Authorized>
              <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
 
        <article class="content px-4">
                    @Body

        </article>
            </Authorized>
            <NotAuthorized>

                <div style="margin: 120px 0; width:100%; text-align: center; color: red;">

                    <span style="font-size:20px">檢測到登錄超時,請重新<a href="/login" style="text-decoration:underline">登錄</a></span>

                </div>
                <RedirectToLogin></RedirectToLogin>
            </NotAuthorized>
        </AuthorizeView>     

    </main>

</div>

 

說明:我將前文中的提示文字保留,實際上我們並沒有看到。

  • mainlayou.razor中的AuthorizeView,限制只有通過授權的用戶才能成功登錄系統。

      4. 在Visual Studio 2022的菜單欄上,找到“調試-->開始調試”或是按F5鍵,Visual Studio 2022會生成BlazorAppDemo應用程式,併在瀏覽器中打開的不在是Index頁面,這時我們看到的將是Login登錄頁面。如下圖。

 

 

5.我們輸入用戶名與密碼,進行模擬登錄。頁面無法進入首頁面,永遠在登錄頁面,這是由於我們並沒有實現AuthenticationStateProvider的原因。

 

備註:

       RedirectToLogin中的代碼NavigationManager.NavigateTo("/Login", true);方法在Debug時會報錯,在.net 6上目前沒找到什麼合適的解決辦法。這裡報錯就直接點擊繼續,不會有任何其他影響,並且Release下不會報錯。如圖:

 

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一文看懂C++右值引用和移動語義 目錄 背景 什麼是右值引用 為什麼需要右值引用 移動構造 move的原理 move的應用場景 右值引用註意事項 總結 背景 C++11引入了右值引用,它也是C++11最重要的新特性之一。原因在於它解決了C++的一大歷史遺留問題,即消除了很多場景下的不必要的額外開銷。 ...
  • 有限狀態機 寫RTL的時候,實現一個功能的時候有很多種方法 將系統劃分為多個狀態,狀態之間有狀態的轉移,第一步,第二步,,,,形成有限狀態機 流水線技術設計,從輸入到輸出有多個步驟 有限狀態機,狀態是有限的,比如8個狀態,16個狀態等,在進行設計的時候,狀態機的狀態不要太多,狀態超過10個,就會造成 ...
  • Ribbon 是Netflix公司提供的負載均衡客戶端,一般應用於服務的消費方法;Ribbon 可以解決基於負載均衡策略進行服務調用, 所有策略都會實現IRule介面;Ribbon 內置的負載策略有8種,可以通過查看IRule介面的實現類進行分析;@LoadBalanced的作用是描述RestTem... ...
  • 本文主要針對博主2018畢業至2023參與軟體開發4年多以來自建的三個開源項目進行介紹與分享,希望對看到本文的新入行的初中級開發者或者未畢業想入行的學生們能夠起到幫助。下麵是項目介紹 一、newbee-mall-pro newbee-mall-pro 是博主在2019年想要自建PC商城項目時,在 n ...
  • 一、前言 在常見的app中,需要用戶登錄後才能使用app,本節我們使用fusion app製作一個登錄頁面,登錄成功之後再跳轉到app主頁。 二、準備工作 下載水仙app和fusion app重製版,在後臺回覆【水仙】和【fa】即可獲取下載鏈接。 二、工程配置 2.1.fusion app配置 新建 ...
  • 本文內容 這篇文章是實戰性質的,也就是說原理部分較少,屬於經驗總結,rust對於模塊的例子太少了。rust特性比較多(悲),本文的內容可能只是一部分,實現方式也不一定是這一種。 關於 rust 模塊的相關內容,準確來說:怎麼在源碼中引用其他模塊的內容。 關於 mod、 use 、as 這幾個關鍵字( ...
  • 效果圖 好久沒有寫wpf了。 最近看到飛書的點贊動畫非常有意思,決定試試,雖然不及飛書那樣的絢麗,但是練手還是可以的,希望自己的手藝還在! 那麼如何寫一個這樣的動畫呢? 首先需要刨析這個動畫的構成: 外圈圓 大拇指-1豎著 大拇指-2握著 顫動動畫 中心旋轉動畫 展開中心旋轉動畫 當我們分析這些東西 ...
  • 工作邏輯是用戶啟動主程式,主程式啟動更新程式,更新程式立刻檢查是否有已經下載好的更新包,如果有則立刻關閉主程式進行更新,如果沒有則訪問伺服器查詢更新包,併在後臺靜默下載,下載完成後等下一次主程式啟動時更新 由於只是簡單的更新程式,所以沒有用資料庫,客戶端版本號以一個json文件保存,服務端則直接以壓 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...