Core + Vue 后台管理基礎框架2——認證

1、前言

　　這塊兒當時在IdentityServer4和JWT之間猶豫了一下，后來考慮到現狀，出於3個原因，暫時放棄了IdentityServer4選擇了JWT：

（1）目前這個前端框架更適配JWT；

（2）前后端分離的項目，如果上IdentityServer4，還要折騰點兒工作，比如前端配置、多余的回調等；

（3）跨度太大，團隊、系統、歷史數據接入都是問題，解決是可以解決，但時間有限，留待后續吧；

　　當然，只是暫時放棄，理想中的最佳實踐還是IdentityServer4做統一鑒權的。

2、JWT認證實現

（1）Common項目下定義JWTConfig配置對象

 

 （2）系統配置文件中增加JWT參數配置

 

 

 此處配置與（1）中的配置對象是對應的。

 

（3）JWT處理程序及相關服務注冊

services.Configure<JWTConfig>(Configuration.GetSection("JWT"));
            var jwtConfig = Configuration.GetSection("JWT").Get<JWTConfig>();
            services.AddAuthentication(options =>
                {
                    options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                    options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
                })
                .AddJwtBearer(options =>
                {
                    options.TokenValidationParameters = new TokenValidationParameters
                    {
                        ValidateIssuer = true,
                        ValidIssuer = jwtConfig.Issuer,
                        ValidateIssuerSigningKey = true,
                        IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(jwtConfig.SymmetricSecurityKey)),
                        ValidateAudience = false,
                        ValidateLifetime = true,
                        ClockSkew = TimeSpan.FromMinutes(5)
                    };
                    options.Events = new JwtBearerEvents
                    {
                        OnTokenValidated = context =>
23                         {
24                             var userContext = context.HttpContext.RequestServices.GetService<UserContext>();
25                             var claims = context.Principal.Claims;
26                             userContext.ID = long.Parse(claims.First(x => x.Type == JwtRegisteredClaimNames.Sub).Value);
27                             userContext.Account = claims.First(x => x.Type == ClaimTypes.NameIdentifier).Value;
28                             userContext.Name = claims.First(x => x.Type == ClaimTypes.Name).Value;
29                             userContext.Email = claims.First(x => x.Type == JwtRegisteredClaimNames.Email).Value;
30                             userContext.RoleId = claims.First(x => x.Type == ClaimTypes.Role).Value;
31 
32                             return Task.CompletedTask;
33                         }
                    };
                });
            JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear();

 

 　　上述代碼中注意紅色那部分Token驗證成功的事件注冊，其目的是認證成功之后，從JWT中取出必要信息構建當前用戶上下文，這個上下文信息非常重要，但凡涉及到需要獲取當前用戶相關信息的部分，都要依賴它，后續文章中對應部分還會提及。

（4）登錄並寫入Token

/// <summary>
        /// 登錄
        /// </summary>
        /// <param name="userDto"></param>
        /// <returns></returns>
        [AllowAnonymous]
        [HttpPost("login")]
        public async Task<IActionResult> Login([FromBody]SysUserDto userDto)
        {
            var validateResult = await _accountService.ValidateCredentials(userDto.Account, userDto.Password);
            if (!validateResult.Item1)
            {
                return new NotFoundObjectResult("用戶名或密碼錯誤");
            }

            var user = validateResult.Item2;
            var claims = new Claim[]
            {
                new Claim(ClaimTypes.NameIdentifier, user.Account),
                new Claim(ClaimTypes.Name, user.Name),
                new Claim(JwtRegisteredClaimNames.Email, user.Email),
                new Claim(JwtRegisteredClaimNames.Sub, user.ID.ToString()),
                new Claim(ClaimTypes.Role, user.RoleId)
            };

            var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(_jwtConfig.SymmetricSecurityKey));

            var token = new JwtSecurityToken(
                issuer: _jwtConfig.Issuer,
                audience: null,
                claims: claims,
                notBefore: DateTime.Now,
                expires: DateTime.Now.AddHours(2),
                signingCredentials: new SigningCredentials(key, SecurityAlgorithms.HmacSha256)
            );

            var jwtToken = new JwtSecurityTokenHandler().WriteToken(token);

            return new JsonResult(new { token = jwtToken });
        }

 （5）前端Token狀態保存

　　一般來講，在后端登錄成功返回前端之后，前端需要保存此token以保持狀態，否則一刷新全完蛋，那我們來看看前端怎么實現。由於前端項目引入了Vuex來保持狀態，那api調用、狀態操作自然就放在store中，我們來看看登錄對應的store。打開前端源碼，找到user這個store：

 

 

 　　我們看到，登錄完畢，調用SET_TOKEN這個mutation提交token狀態變更保存Token，這個mutation及其背后的state如下如下：

 

 同時，在登錄action中，登錄成功之后，我們還發現了一行代碼：

 

 　　此setToken引自前端工具類，auth.js，代碼如下：

import Cookies from 'js-cookie'

const TokenKey = 'ngcc_mis_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

　　至此我們明白了前端的機制，把token寫入Vuex狀態的同時，再寫入cookie。那這里問一句，只寫入Vuex狀態，行不行呢？不行，因為瀏覽器一刷新，所有前端對象就會銷毀，包括Vuex對象，這樣會導致前端丟失會話。

3、總結

　　以上就是系統認證的實現，大家摸清楚各種認證方案、優缺點、特點，多深入源碼、機制，遇到問題自然會手到擒來。

SET_TOKEN