從零開始Blazor Server(3)--新增cookie授權

認證方式簡述

Blazor Server微軟官方還是推薦直接使用Cookie授權，因為本來Blazor Server就是前後端不分離的。不存在Cookie跨域等一系列問題。

只要不是使用SSO之類的統一登入方式，建議直接使用Cookie作為認證方式就行，簡單方便。

新增Cookie認證

Blazor新增Cookie認證的方式跟MVC沒什麼區別，也是在Program.cs裡新增對應的認證中介軟體。

1. 新增Cookie認證方式

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie();

2. 增加認證中介軟體

app.UseAuthentication();
app.UseAuthorization();

這個處理是不是跟使用MVC的時候一模一樣？

這裡需要注意，Blazor Server只有第一次連線的時候會走中介軟體，之後連線成功就是SingalR了，不會每個請求都走中介軟體，所以之前的MVC的那種在中介軟體或者過濾器裡進行處理的路子走不通了。

新建Login.razor

我們需要新建一個登入頁面，本篇暫時只是放一個佔位頁，不實現登入，下一篇我們再來完成登入。

這裡需要注意，Login頁面應該是獨立佈局的，不應該有MainLayout的選單佈局，但是我們在App.razor裡指定了預設佈局，這裡怎麼辦呢。

我們選用一種最簡單的辦法，就是新建一個空佈局，讓Login頁面使用我們的空佈局。

首先我們在Shared裡面新建一個LoginLayout，這個就是一個空Layout。

LoginLayout.razor：

@inherits LayoutComponentBase

@Body

標準的一個Layout模板，繼承於LayoutComponentBase，然後裡面只有一個@Body。

然後新建一個Login.razor，指定它的佈局為LoginLayout。

Login.razor：

@page "/Login"
@layout LoginLayout

<h3>Login</h3>

建立RedirectToLogin元件

這個元件沒有其他任何作用，就是在未登入時跳轉到登入頁面。

REdirectToLogin.razor：

@inject NavigationManager NavigationManager

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

這裡注意，NavigationManager.NavigateTo("/Login", true);方法在Debug時會報錯，這個錯誤我個人認為是微軟的鍋，在.net 6上目前沒找到什麼合適的解決辦法。這裡報錯就直接點選繼續，不會有任何其他影響，並且Release下不會報錯。如果你用Rider的Run來執行，也不會報錯。

如果各位大佬知道如何能解決這個報錯，請留言告訴我一下，感激不盡。

修改App.razor

這裡我們需要把原來的RouteView修改為AuthorizeRouteView。

這個AuthorizeRouteView是Blazor自帶的一個授權元件，它內部處理了授權資訊，內部有NotAuthorized和Authorizing可供使用。

• NotAuthorized即未授權的情況，這種情況如果不寫，預設好像是顯示一行文字，Not Authorized。內部是一個RenderFragment所以可以新增任何內容。

• Authorizing是授權認證中顯示的文字，我們使用Cookie認證的話一般不會有這種情況，但是如果我們使用統一認證，或者其他網路認證的時候，可能會有等待認證的時間，這時候就會顯示這裡的內容。

我們需要的是跳轉到登入頁面，所以我們就在NotAuthorized的時候載入我們的RedirectToLogin的元件即可。

<NotAuthorized>
                    <RedirectToLogin></RedirectToLogin>
                </NotAuthorized>

Index頁面增加授權

這個最簡單，就是在需要授權的頁面上增加[Authorize]標籤即可。

@attribute [Authorize]

這樣我們直接F5執行程式，應該就會發現自動跳轉到了Login路徑下。

原始碼在github:https://github.com/j4587698/BlazorLearn，分支為lesson3