Blazor實現未登錄重定向到登錄頁的方法

今天研究了一下blazor，發現他默認啟動就是類似於后台管理系統的界面，看到這個頁面我就想給他寫個登錄，有登錄就涉及到未登錄重定向的問題，但是我沒有找到blazor全局路由的設置，知道的老哥可以告訴我一下哈，在這里我是基於操作LocalStorage的方法，如果訪問默認布局時若沒有LocalStorage，就重定向到login頁，其實也可以判斷不存在LocalStorage就將布局渲染為登錄頁，也不知道那種正規，我采用的是重定向的方法

首先新建一個類叫LocalStorageHelper.cs 用來調用js操作LocalStorage

using Microsoft.JSInterop;
using System.Threading.Tasks;

namespace BlazorLoginTest
{
	/// <summary>
	/// 操作LocalStorage幫助類
	/// </summary>
	public class LocalStorageHelper
    {
        private readonly IJSRuntime _jsRuntime;
        public LocalStorageHelper(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }
        /// <summary>
        /// 設置LocalStorage
        /// </summary>
        /// <param name="key"></param>
        /// <param name="value"></param>
        /// <returns></returns>
        public async Task SetLocalStorage(string key, string value)
        {
            await _jsRuntime.InvokeVoidAsync("LocalStorageSet", key, value);
        }
        /// <summary>
        /// 獲取LocalStorage
        /// </summary>
        /// <param name="key"></param>
        /// <returns></returns>
        public async Task<string> GetLocalStorage(string key)
        {
            return await _jsRuntime.InvokeAsync<string>("LocalStorageGet", key);
        }
    }
}

然后在wwwroot文件夾下面新建js文件夾 新建文件LocalStorageHelper.js

function LocalStorageSet(key, value) {
    localStorage.setItem(key, value);
};
function LocalStorageGet(key) {
    return localStorage.getItem(key);
};

index.html里面引用一下這個js

<script src="js/LocalStorageHelper.js"></script>

到Pages文件夾里面新建一個razor組件 Login.razor

@page "/login"
@layout LoginLayout
@inject IJSRuntime JSRuntime
@inject NavigationManager navigationManager

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">請輸入郵箱地址</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" @bind-value="@Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">請輸入密碼</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password" @bind-value="@Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" @onclick="LoginMethod">Sign in</button>
        </div>
    </div>
</form>
@code{
    private string Email { get; set; }
    private string Password { get; set; }
    private async Task LoginMethod()
    {
        if (Email == "[e-mail]" && Password == "123456")
        {
            Console.WriteLine("登錄成功");
            LocalStorageHelper localStorageHelper = new LocalStorageHelper(JSRuntime);
            await localStorageHelper.SetLocalStorage("email", Email);
            navigationManager.NavigateTo("/", false);

        }
    }

}

因為登錄頁面如果使用默認布局就會也顯示左側導航，所以需要給他指定一個布局 在shared文件夾下面新建文件LoginLayout.razor

@inherits LayoutComponentBase
<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>

啟動項目 手動輸入網址https://localhost:44344/login

用戶名 [e-mail]
密碼 123456

登錄成功可以進入首頁 發現LocalStorage已經成功寫入數據了

最后去默認布局文件MainLayout.razor里面，重新組件初始化方法，判斷LocalStorage里面是否存在email，不存在則重定向到登錄頁

@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime
@inject NavigationManager navigationManager
<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>
@code{
    protected override async Task OnInitializedAsync()
    {
        LocalStorageHelper localStorageHelper = new LocalStorageHelper(JSRuntime);
        if (string.IsNullOrEmpty(await localStorageHelper.GetLocalStorage("email")))
        {
            navigationManager.NavigateTo("Login");
        }
    }
}

可以清空LocalStorage刷新試一下，發現已經重定向到登錄頁了

如果只想設置某些組件需要登錄，可以再寫一個組件用來判斷，然后在需要登錄的組件里引用那個組件就好了

只不過麻煩了一點，但是在默認布局里面寫判斷的話，如果用戶不刷新就不會執行初始化里面的代碼了

源碼地址