Blazor实现未登录重定向到登录页的方法

2020-09-24 18:02:45 阅读：856 来源： 互联网

标签：重定向登录 LocalStorageHelper LocalStorage key Blazor jsRuntime string

今天研究了一下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
<Layout>
    <Content Style="overflow: auto; height: 100vh; width:100vw; position: fixed; left: 0; background:#808080 ">
        <div style="margin:40vh auto auto 40vw;width:20vw;">
            @Body
        </div>
    </Content>
</Layout>

启动项目手动输入网址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");
        }
    }
}

可以清空LocalStorage刷新试一下，发现已经重定向到登录页了

如果只想设置某些组件需要登录，可以再写一个组件用来判断，然后在需要登录的组件里引用那个组件就好了

只不过麻烦了一点，但是在默认布局里面写判断的话，如果用户不刷新就不会执行初始化里面的代码了

源码地址

标签：重定向,登录,LocalStorageHelper,LocalStorage,key,Blazor,jsRuntime,string
来源： https://www.cnblogs.com/Hero-/p/13725490.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Blazor实现未登录重定向到登录页的方法