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 == "admin@abc.com" && 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

用户名 admin@abc.com

密码 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"); } } }