学习ASP.NET Core Blazor编程系列三十——JWT登录（4）

偏执的太偏执、 2024-03-16 14:14 13阅读 0赞

## 十三、实现登出 ##

至此关于Blazor的内容，先写到这里， 我们基本上完成了登入、增加、删除、查询、修改等功能，应对一般的应用，已经足够。今天实现登录功能。有登入，必然要有登出，本文我们来介绍一下如何登出。

1. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Pages”文件夹，右键单击，在弹出菜单中选择“添加—>Razor组件…”，并将组件命名为“Logout.razor”。登出组件的功能是用于退出登入，返回首面。其代码如下：

![9767d5530624523eff21e6bc9eb06d9c.gif][]

@page "/Logout"
    @using BlazorAppDemo.Auth;
    @inject IAuthService authService
    @inject NavigationManager navigation 
    
    @code {
        protected override async Task OnInitializedAsync()
        {
    
            await authService.LogoutAsync();
            navigation.NavigateTo("/");
        }
    
    }

![ae1af0bea3f8c75afee7949051a3da3e.gif][]

2. 在Visual Studio 2022的解决方案管理器中，使用鼠标左键，双击TokenManager.cs文件，对代码进行修改。具体代码如下：

![ccfa7ee4f792a432155887e278a27c15.gif][]

using BlazorAppDemo.Models;
    using System.Collections.Concurrent;
     
    namespace BlazorAppDemo.Utils
    {
     
     
        public class TokenManager
        {
     
            private const string TOKEN = "authToken";
     
            private static readonly ConcurrentDictionary<string, UserToken> tokenManager;
             static TokenManager()
            {
                tokenManager=new ConcurrentDictionary<string, UserToken>();
            }
    
            public static ConcurrentDictionary<string, UserToken> Instance { get { return tokenManager; } }
     
            public static string Token { get { return TOKEN; } }
     
            public static bool RemoveToken(string token)
            {
                if (tokenManager.TryRemove(token,out UserToken delUserToken))
                {
                    Console.WriteLine($"delete token {delUserToken.Token}");
                    return true;
                }
                else
                {
    
                    Console.WriteLine($"unable delete token {delUserToken.Token}");
                    return false;
                }
            }
        }
    }

![69169e1e3f872e63d724dd253eb3b906.gif][]

3.在Visual Studio 2022的解决方案资源管理器中，鼠标左键双击“Api”文件夹中的 “AuthController.cs”文件，将此文件中的Logout方法的代码补全。代码如下：

![d1f3b7c69686034fbdcfefc2a3f4db9b.gif][]

using BlazorAppDemo.Models;
    using BlazorAppDemo.Utils;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Identity;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using Microsoft.IdentityModel.Tokens;
    using Newtonsoft.Json.Linq;
    using System.IdentityModel.Tokens.Jwt;
    using System.Security.Claims;
    using System.Text;
     
    namespace BlazorAppDemo.Api
    {
        [Route("api/[controller]")]
        [ApiController]
        public class AuthController : ControllerBase
        {
            private readonly IJWTHelper jwtHelper;
           
     
            public AuthController(IJWTHelper _IJWTHelper)
            {
                this.jwtHelper = _IJWTHelper;
               
                }
     
            [HttpPost("Login")]
                public async Task<ActionResult<UserToken>> Login(UserInfo userInfo)
            {
                //Demo用
                if (userInfo.UserName == "admin" && userInfo.Password == "111111")
                {
                    return BuildToken(userInfo);
                }
                else
                {
                    UserToken userToken = new UserToken()
                    {
                        StatusCode = System.Net.HttpStatusCode.Unauthorized,
                        IsSuccess = false
                       
                    };
                    return userToken;
                }
            }
          
     
            /// <summary>
            /// 建立Token
            /// </summary>
            /// <param name="userInfo"></param>
            /// <returns></returns>
            private UserToken BuildToken(UserInfo userInfo)
            {
               
                string jwtToken = jwtHelper.CreateJwtToken<UserInfo>(userInfo);
     
                //建立UserToken，回传客户端
                UserToken userToken = new UserToken()
                {
                    StatusCode = System.Net.HttpStatusCode.OK,
                    Token = jwtToken,
                    ExpireTime = DateTime.Now.AddMinutes(30),
                    IsSuccess= true
                   
                };
                return userToken;
            }
    
       [HttpGet("Logout")]
            public async Task<ActionResult<UserToken>> Logout()
            {
               bool flag= TokenManager.RemoveToken(TokenManager.Token);
              
                var response = new UserToken();
                response.IsSuccess = !flag;
                return response;
            }
        }
    }

![10c740ec186fbd26d4f51dafc554d6c6.gif][]

4.在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Auth”文件夹中的 “AuthService.cs”文件，将此文件中的LogoutAsync方法中添加如下代码：

![078df9698e5aa717e9c64f9874838787.gif][]

using BlazorAppDemo.Models;
    using BlazorAppDemo.Utils;
    using Microsoft.AspNetCore.Components.Authorization;
    using Microsoft.AspNetCore.Identity;
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;
    using System.Collections.Concurrent;
    using System.Net.Http;
    using System.Text;
     
    namespace BlazorAppDemo.Auth
    {
     
        public class AuthService : IAuthService
        {
            private readonly HttpClient httpClient;
            private readonly AuthenticationStateProvider authenticationStateProvider;
            private readonly IConfiguration configuration;
            private readonly Api.AuthController authController;
            private readonly string currentUserUrl, loginUrl, logoutUrl;     
    
            public AuthService( HttpClient httpClient, AuthenticationStateProvider authenticationStateProvider, 
    IConfiguration configuration,Api.AuthController authController)
            {
                this.authController = authController;
                this.httpClient = httpClient;
                this.authenticationStateProvider = authenticationStateProvider;
                this.configuration = configuration;
                currentUserUrl = configuration["AuthUrl:Current"] ?? "Auth/Current/";
    
                loginUrl = configuration["AuthUrl:Login"] ?? "api/Auth/Login";
                logoutUrl = configuration["AuthUrl:Logout"] ?? "/api/Auth/Logout/";
            }
    
            public async Task<UserToken> LoginAsync(UserInfo userInfo)
            {
     response.Content.ReadFromJsonAsync<UserToken>();
               var result = authController.Login(userInfo);
    
                var loginResponse =  result.Result.Value;
    
                if (loginResponse != null && loginResponse.IsSuccess)
                    {                  
                        TokenManager.Instance.TryAdd(TokenManager.Token, loginResponse);
                        ((ImitateAuthStateProvider)authenticationStateProvider).NotifyUserAuthentication(loginResponse.Token);
     
                        httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("bearer",
     loginResponse.Token);
     
                        return loginResponse;
                    }
                return new UserToken() { IsSuccess = false };
            }
          
            public async Task<UserToken> LogoutAsync()
            {
                var result = authController.Logout();
                var logoutResponse = result.Result.Value;
               ((ImitateAuthStateProvider)authenticationStateProvider).NotifyUserLogOut();
                httpClient.DefaultRequestHeaders.Authorization = null;
                return logoutResponse;
            }
      }
    
    }

![06d4c6fd4b4308116cdb8f0fd7519a33.gif][]

LogoutAsync方法：

*  将token从TokenManger实例中移除
 *  通知前面页面更新登录状态
 *  将request中的header参数bearer token移除。

5. 在Visual Studio 2022的解决方案管理器中，使用鼠标左键，双击ImitateAuthStateProvider.cs文件，对代码进行修改。具体代码如下：

![69169e1e3f872e63d724dd253eb3b906.gif][]

using BlazorAppDemo.Models;
    using BlazorAppDemo.Utils;
    using Microsoft.AspNetCore.Components.Authorization;
    using System.Net.Http;
    using System.Security.Claims;
     
    namespace BlazorAppDemo.Auth
    {
        public class ImitateAuthStateProvider : AuthenticationStateProvider
        {
            private readonly IJWTHelper jwt;
            private AuthenticationState anonymous;
            private readonly HttpClient httpClient;
     
            public ImitateAuthStateProvider(IJWTHelper _jwt, HttpClient httpClient)
            {
                anonymous = new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
                jwt = _jwt;
                this.httpClient = httpClient;
            }
     
            bool isLogin = false;
            string token = string.Empty;
            public override Task<AuthenticationState> GetAuthenticationStateAsync()
            {
                //确认是否已经登录
                UserToken userToken;
                    TokenManager.Instance.TryGetValue(TokenManager.Token,out userToken);
                string tokenInLocalStorage=string.Empty;
                if (userToken != null)
                {
                    tokenInLocalStorage = userToken.Token;
                }
    
                if (string.IsNullOrEmpty(tokenInLocalStorage))
                {
                    //沒有登录，则返回匿名登录者
                    return Task.FromResult(anonymous);
                }
     
                //將token取出转换为claim
                var claims = jwt.ParseToken(tokenInLocalStorage);
     
                //在每次request的header中都将加入bearer token
                httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("bearer", 
    tokenInLocalStorage);
                //回传带有user claim的AuthenticationState
    
                return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims, "jwt"))));
    
            }
            public void Login(UserInfo request)
            {
                //1.验证用户账号密码是否正确
                if (request == null)
                {
                    isLogin=false;
                }
                if (request.UserName == "user" && request.Password == "111111")
    
                {
                    isLogin = true;
                   token= jwt.CreateJwtToken<UserInfo>(request);
                    Console.WriteLine($"JWT Token={token}");
                }
    
                NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
            }
    
            public void NotifyUserAuthentication(string token)
            {
    
                var claims = jwt.ParseToken(token);
                var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(claims, "jwt"));
                var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
                NotifyAuthenticationStateChanged(authState);
            }
    
        public void NotifyUserLogOut()
            {
                var authState = Task.FromResult(anonymous);
                NotifyAuthenticationStateChanged(authState);
            }
     
        }
    }

![3974e9ef02d7fde4e59d4e5f0801b471.gif][]

6. 在Visual Studio 2022的解决方案管理器中，使用鼠标左键，双击MainLayout.razor文件，对代码进行修改。具体代码如下：

![cdbeb73c917ae49243c7f9935127e6ce.gif][]

@using BlazorAppDemo.Pages
    @inherits LayoutComponentBase
     
    <PageTitle>BlazorAppDemo</PageTitle>
     
    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>
     
        <main>
            <AuthorizeView>
                <Authorized>
                  <div class="top-row px-4">
    
    
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
                    <div class ="col-3 oi-align-right">
                            你好, @context.User.Identity.Name!<a href="/Logout">Logout</a>
                            </div>
          </div>     
     
            <article class="content px-4">
                        @Body
            </article>
    
                </Authorized>
                <NotAuthorized>
                    <div style="margin: 120px 0; width:100%; text-align: center; color: red;">
    
                        <span style="font-size:20px">检测到登录超时，请重新<a href="/login" style="text-decoration:underline">登录</a>！
    
    </span>
                    </div>
                    <RedirectToLogin></RedirectToLogin>
                </NotAuthorized>
            </AuthorizeView>     
    
        </main>
    </div>

![f9c8cb000b80370d847f54d9f19dc871.gif][]

7. 在Visual Studio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序。浏览器会打开登录页面。我们在登录页面的用户名输入框中输入用户名，在密码输入框中输入密码，点击“登录”按钮，进行登录。我们进入了系统，在页面的右上角处，会出现登录用户的用户名，与一个“Logout”按钮。如下图。

![8d0df5f8130eb9b108c616b458b724ea.png][]

[9767d5530624523eff21e6bc9eb06d9c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/bb594cbf12ec46cf9fe520333fa28d05.png
[ae1af0bea3f8c75afee7949051a3da3e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/d645d033273e4836a43096f00ae9d34e.png
[ccfa7ee4f792a432155887e278a27c15.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5bfc8e9936844dc0913502dff48a3b7f.png
[69169e1e3f872e63d724dd253eb3b906.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1a68e30c6426430a8c720025f42f59ff.png
[d1f3b7c69686034fbdcfefc2a3f4db9b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/78e8f3fb6afd416a983d3189fc6e7fbd.png
[10c740ec186fbd26d4f51dafc554d6c6.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6c91861aca2449609f2ccaf3296cf971.png
[078df9698e5aa717e9c64f9874838787.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/940bef34f4e44f68b3f151f38557285f.png
[06d4c6fd4b4308116cdb8f0fd7519a33.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/b4ea71d3024c46e2ab983524103c3a74.png
[3974e9ef02d7fde4e59d4e5f0801b471.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8c3177637f4946d3a2c06b89b171cffc.png
[cdbeb73c917ae49243c7f9935127e6ce.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/f470bd749f6b49ac8e5d3dc7a2e2b000.png
[f9c8cb000b80370d847f54d9f19dc871.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/e3d4441e21cd4f3e9467b43959812246.png
[8d0df5f8130eb9b108c616b458b724ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fb325cda21d34fefa89f24a3ded1e771.png