Blazor Server 自定义登录退出鉴权判断

VS2022中的官方方案中，鉴权方案会用到SqlServer，而我的项目要用MySql，两者没法兼容，遂自己写了一套。

预备：用VS2022新建一个Blazor Server项目

 

第一步：编写自定义的登录，退出，鉴权类 SessionObjectHelper.cs，并且在Program.cs里注册

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;

namespace BlazorAppAuthDemo
{
    public class SessionObjectHelper
    {
        private ProtectedSessionStorage _sessionStorage;

        public SessionObjectHelper(ProtectedSessionStorage storage)
        {
            _sessionStorage = storage;
        }

        /// 

        /// 是否登录
        /// 
        /// 
        public async Task IsLogin()
        {
            var value = await _sessionStorage.GetAsync("user");

            if (value.Success && !string.IsNullOrEmpty(value.Value))
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        /// 

        /// 是否有权限
        /// 
        /// 
        public async Task HasAuth(string authString)
        {
            var value = await _sessionStorage.GetAsync("user");

            if (value.Success && !string.IsNullOrEmpty(value.Value))
            {
                if (!string.IsNullOrEmpty(authString) && authString.Equals(value.Value))
                {
                    return true;
                }

                return false;
            }
            else
            {
                return false;
            }
        }

        public async Task GetSession()
        {
            var value = await _sessionStorage.GetAsync("user");

            return value.Success?value.Value:"";
        }

        public async Task SetSession(string value)
        {
            await _sessionStorage.SetAsync("user", value);
        }

        /// 

        /// 设置过期
        /// 
        /// 
        public async Task SetExpires()
        {
            await _sessionStorage.SetAsync("user", "");
        }
    }
}

在Program.cs里注册 

builder.Services.AddScoped();

 

第二步：自定义鉴权的控件 AuthComponet.razor

@using BlazorAppAuthDemo.Data
@inject SessionObjectHelper Session

@if (Logined)
{
	@if (doNotReload)
	{
		
出现错误,请点此刷新
	}
	else
	{
		@if (HasAuth)
		{
			
				@ChildContent
			
		}
		else
		{
			
暂无权限查看...
		}
	}
}
else
{
	
尚未登录，请先 登录
}

@code {



	public bool Logined;

	public bool HasAuth;

	private bool doNotReload;


	[Parameter]
	public RenderFragment ChildContent { get; set; }


	[Inject]
	NavigationManager Navigation { get; set; }


	[Parameter]
	public string AuthString { get; set; }

	public string UserAuths { get; set; }

	protected override async Task OnInitializedAsync()
	{
		try
		{
			if (await Session.IsLogin())
			{
				Logined = true;

				if (await Session.HasAuth(AuthString))
				{
					HasAuth = true;
				}
			}

		}
		catch (Exception ex)
		{
			doNotReload = true;

			//Navigation.NavigateTo("/", true, true);
		}

	}
}

第三步：使用

1、登录页面Login.razor及方法使用

@page "/Login"

@inject SessionObjectHelper Session

登录



@code {


	protected override async Task OnAfterRenderAsync(bool firstRender)
	{

		await Session.SetSession("abc");


		await base.OnAfterRenderAsync(firstRender);
	}

}

2、退出登录页面Logout.razor及方法使用

@page "/Logout"

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@inject SessionObjectHelper Session

Logout

@code {

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		await Session.SetSession(null);

		await base.OnAfterRenderAsync(firstRender);
	}

}

3、鉴权页面Counter.razor及方法使用

@page "/counter"
@using BlazorAppAuthDemo.Data
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage

Counter

Counter

Current count: @currentCount

Click me


是否登录 @(IsLogin)

是否是否有权限 @(HasAuth)



    哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈




@code {


    private bool IsLogin{ get; set; }

    private bool HasAuth{ get; set; }


    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    [Inject] 
    public SessionObjectHelper Session { get; set; } = default;


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            IsLogin = await Session.IsLogin();

            HasAuth = await Session.HasAuth("sdef");

            this.StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);

    }
}

最后：验证效果

点击Counter页面，会发现有未登录和没有权限的提示

 

手动改URL为：BlazorAppAuthDemohttp://localhost:2254/login

自己玩吧：）