从零开始一起学Blazor WebAssembly 开发(4)

登录模块基本完成了,登录主要用了以下几个点:

1、后端采用的Abp Vnext 框架,这个框架自带的IdentityServer4用户角色权限控制,这个框架登录研究了好一阵子,有几个坑这里说下:

1)、Login.Razor利用HttpClient把用户名和Rsa加密后的密码提交到后端,后端把密码解密后再往IdentityServer4的服务器获取Token(用的oauth2.0 里的密码模式),这块知识网上能搜到不少,重点说一下这里有个坑,就是我之前不知道的,传scope时,要传 offline_access 这个 才能返回RefreshToken,因为IdentityServer4 默认提供的是JWT令牌,这个令牌相关的资料也能从网上搜到不少,这里就不讲了。这个令牌有个缺点,就是服务器控制不了退出,解决办法就是让accesstoken有效时间变短,快到期时用refreshtoken 刷新,这个refreshtoken 我建议是保存在后端,不要往前端放,需要刷新时,前端传请求过来。如果必须要放在前端,IdentityServer4 提供了OneTimeOnly这种设置。就是只能用一次就换的。

2)、IdentityServer4在每次请求之前框架有一个调用发现文档的服务(httpClient.GetDiscoveryDocumentAsync)。这个服务就是返回IdentityServer4所支持的服务,研究了下Abp vnext框架自带的,发现每次都调用这块太耗时间。就想把结果放在缓存里,结果试了很久,发现Abp自带的缓存框架处理不好这个,自己另外写也不是不行。但是就感觉不太好。然后研究发现,其实IdentityServer4 也带了一个发现文档缓存的方法IDiscoveryCache,用这个就能实现了,具体使用方法这里讲一下,因为我发现网上这个资料真不多:

a 先注入

 //发现文档缓存
            context.Services.AddSingleton(r =>
            {
                var factory = r.GetRequiredService();
                //var policy = new DiscoveryPolicy() { },用到可以加下
                var dc = new DiscoveryCache(configuration["IdentityClients:Default:Authority"], () => factory.CreateClient());
                //dc.CacheDuration = TimeSpan.FromMinutes(2); 缓存有效期,    默认是24小时,需要改的话自己改
                return dc;
            });

 

b 使用

 private readonly IDiscoveryCache _ddrcache;  
          //上下两处代码结合自己的项目的Service,自己分别写。
           var disco = await _ddrcache.GetAsync();
            if (disco.IsError)
            {
                throw new Exception(disco.Error);
            }
            return disco;

 

3)、前端和后端不是在同一个域里边,原本以为webAssembly 有点近似客户端,应该不会有这个问题。发现还真的有,这就需要在后端设置下跨域设置,否则提交不了。

2、登录后前端得到Token,要把Token信息保存到localstore里,这里用到了网上一个大神的解决方案,直接看代码

 public class TokenUtil
    {
        private readonly IJSRuntime _jsRuntime;
        public TokenUtil(IJSRuntime jsRuntime)
        {
            _jsRuntime = jsRuntime;
        }
        public async Task SaveAccessToken(string accessToken)
        {
            await _jsRuntime.InvokeVoidAsync("wasmHelper.saveAccessToken", accessToken);
        }
        public async Task GetAccessToken()
        {
            return await _jsRuntime.InvokeAsync("wasmHelper.getAccessToken");
        }
        public async Task RefreshToken(string tokenValue)
        {
            var httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Add("Authorization", "Bearer " + tokenValue);
            await httpClient.GetFromJsonAsync("");
        }
    }

 

var wasmHelper = {};

wasmHelper.ACCESS_TOKEN_KEY = "__access_token__";

wasmHelper.saveAccessToken = function (tokenStr) {
    localStorage.setItem(wasmHelper.ACCESS_TOKEN_KEY, tokenStr);
};

wasmHelper.getAccessToken = function () {
    return localStorage.getItem(wasmHelper.ACCESS_TOKEN_KEY);
};

 

登录模块完成了,剩下就是些细节了。没有什么技术难题。

你可能感兴趣的:(从零开始一起学Blazor WebAssembly 开发(4))