隐藏

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

发布:2022/4/27 14:26:55作者:管理员 来源:本站 浏览次数:806

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


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


 


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

 
		
  1. using Microsoft.AspNetCore.Components;
  2. using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
  3. namespace BlazorAppAuthDemo
  4. {
  5. public class SessionObjectHelper
  6. {
  7. private ProtectedSessionStorage _sessionStorage;
  8. public SessionObjectHelper(ProtectedSessionStorage storage)
  9. {
  10. _sessionStorage = storage;
  11. }
  12. /// <summary>
  13. /// 是否登录
  14. /// </summary>
  15. /// <returns></returns>
  16. public async Task<bool> IsLogin()
  17. {
  18. var value = await _sessionStorage.GetAsync<string>("user");
  19. if (value.Success && !string.IsNullOrEmpty(value.Value))
  20. {
  21. return true;
  22. }
  23. else
  24. {
  25. return false;
  26. }
  27. }
  28. /// <summary>
  29. /// 是否有权限
  30. /// </summary>
  31. /// <returns></returns>
  32. public async Task<bool> HasAuth(string authString)
  33. {
  34. var value = await _sessionStorage.GetAsync<string>("user");
  35. if (value.Success && !string.IsNullOrEmpty(value.Value))
  36. {
  37. if (!string.IsNullOrEmpty(authString) && authString.Equals(value.Value))
  38. {
  39. return true;
  40. }
  41. return false;
  42. }
  43. else
  44. {
  45. return false;
  46. }
  47. }
  48. public async Task<string> GetSession()
  49. {
  50. var value = await _sessionStorage.GetAsync<string>("user");
  51. return value.Success?value.Value:"";
  52. }
  53. public async Task SetSession(string value)
  54. {
  55. await _sessionStorage.SetAsync("user", value);
  56. }
  57. /// <summary>
  58. /// 设置过期
  59. /// </summary>
  60. /// <returns></returns>
  61. public async Task SetExpires()
  62. {
  63. await _sessionStorage.SetAsync("user", "");
  64. }
  65. }
  66. }

在Program.cs里注册 

builder.Services.AddScoped<SessionObjectHelper>(); 
		

 

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

 
		
  1. @using BlazorAppAuthDemo.Data
  2. @inject SessionObjectHelper Session
  3. @if (Logined)
  4. {
  5. @if (doNotReload)
  6. {
  7. <p>出现错误,请点此刷新</p>
  8. }
  9. else
  10. {
  11. @if (HasAuth)
  12. {
  13. <CascadingValue Value="@this">
  14. @ChildContent
  15. </CascadingValue>
  16. }
  17. else
  18. {
  19. <p>暂无权限查看...</p>
  20. }
  21. }
  22. }
  23. else
  24. {
  25. <p>尚未登录,请先 <a href="/login">登录</a></p>
  26. }
  27. @code {
  28. public bool Logined;
  29. public bool HasAuth;
  30. private bool doNotReload;
  31. [Parameter]
  32. public RenderFragment ChildContent { get; set; }
  33. [Inject]
  34. NavigationManager Navigation { get; set; }
  35. [Parameter]
  36. public string AuthString { get; set; }
  37. public string UserAuths { get; set; }
  38. protected override async Task OnInitializedAsync()
  39. {
  40. try
  41. {
  42. if (await Session.IsLogin())
  43. {
  44. Logined = true;
  45. if (await Session.HasAuth(AuthString))
  46. {
  47. HasAuth = true;
  48. }
  49. }
  50. }
  51. catch (Exception ex)
  52. {
  53. doNotReload = true;
  54. //Navigation.NavigateTo("/", true, true);
  55. }
  56. }
  57. }

第三步:使用

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

 
		
  1. @page "/Login"
  2. @inject SessionObjectHelper Session
  3. <h3>登录</h3>
  4. @code {
  5. protected override async Task OnAfterRenderAsync(bool firstRender)
  6. {
  7. await Session.SetSession("abc");
  8. await base.OnAfterRenderAsync(firstRender);
  9. }
  10. }

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

 
		
  1. @page "/Logout"
  2. @using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
  3. @inject SessionObjectHelper Session
  4. <h3>Logout</h3>
  5. @code {
  6. protected override async Task OnAfterRenderAsync(bool firstRender)
  7. {
  8. await Session.SetSession(null);
  9. await base.OnAfterRenderAsync(firstRender);
  10. }
  11. }

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

 
		
  1. @page "/counter"
  2. @using BlazorAppAuthDemo.Data
  3. @using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
  4. <PageTitle>Counter</PageTitle>
  5. <h1>Counter</h1>
  6. <p role="status">Current count: @currentCount</p>
  7. <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
  8. <span>是否登录 @(IsLogin)</span>
  9. <span>是否是否有权限 @(HasAuth)</span>
  10. <AuthComponet>
  11. <span>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
  12. </AuthComponet>
  13. @code {
  14. private bool IsLogin{ get; set; }
  15. private bool HasAuth{ get; set; }
  16. private int currentCount = 0;
  17. private void IncrementCount()
  18. {
  19. currentCount++;
  20. }
  21. [Inject]
  22. public SessionObjectHelper Session { get; set; } = default;
  23. protected override async Task OnAfterRenderAsync(bool firstRender)
  24. {
  25. if (firstRender)
  26. {
  27. IsLogin = await Session.IsLogin();
  28. HasAuth = await Session.HasAuth("sdef");
  29. this.StateHasChanged();
  30. }
  31. await base.OnAfterRenderAsync(firstRender);
  32. }
  33. }

最后:验证效果


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

 

手动改URL为:BlazorAppAuthDemoicon-default.png?t=M1L8http://localhost:2254/login