（Ant Design of Blazor為努力而生）

書接上文，上次我們說到了最終選用Blazor.Server來實現了我們的MVP項目，額其實就是博客的增刪改查，不過運行還是很爽的，不過是一個小demo，腦子里一直有個聲音，說把Blog.Admin項目給做個Blazor版本，以后再說吧，一個人畢竟是有限的。

這三篇也是上中下了，從客戶端，到服務端，最后今天簡單說下權限，之后可能還是重點說下NetCore的相關內容吧。

上周我們雖然已經部署了，加載速度也解決了，展示也挺好了，最后確有一個小問題，讓我不得不提上日程，那就是權限問題，因為我增加了新增和修改，肯定不能讓每個人都處理吧，好，那咱們就開搞，我周六用了一下午的時候，研究了下如何加權的問題，感覺并不是很滿意，雖然也可以用，希望有借鑒意義。

1、Blazor權限控制有哪幾種？

關于Blazor.Server開發中的權限控制呢，其實是有三個方向，或者說是三個模塊的，這里簡單說一下吧：

1、對.razor組件的加權

我們通過之前的了解，已經發現了其實Blazor組件中，可以寫c#的業務邏輯，更像是一個.cs類文件一樣，所以我們也可以像寫類或者方法那樣，直接加個特性，官方也是這么說的：

@page "/fetchdata" @attribute [Authorize(Roles = "Admin")]

是不是感覺挺厲害的，直接配置，然后只要我們的HttpContext中有對應的Claims，那就可以訪問，否則就不能獲取指定的內容，官方還給來了個組件：

<AuthorizeView Roles="User"><p>You can only see this if you're in the User role.</p> </AuthorizeView><AuthorizeView Roles="Admin"><p>You can only see this if you're in the Admin role.</p> </AuthorizeView>

看似一切正常的情況下，我沒有試驗成功，可能文檔看的還是不夠，這里留個疑問，以后有機會學會了，再補充下。

而且，就算是可以的，最后會出現另一個問題，就是如何和IdentityServer4進行兼容問題，畢竟我們的BlogCore資源服務器是基于Ids4驗證的，????，困難總比辦法多。

所以這種方法暫時擱置，是擱置，不是放棄。

2、通過service服務來控制

昨天我們在講到創建官方Demo的時候，看到了Blazor.Server項目其實是可以通過自己建Service服務來進行處理的，包括持久化，那我們能不能在這里做處理呢？

這個就更像是我們的NetCore項目了，嗯，感覺靠譜，畢竟輕車熟路，可是轉念一想，我們使用的是第三方的BlogCore的資源服務器呀，這里就算加權了，但是c#發起HttpClient請求的時候，不還是有問題，還是需要傳遞Token么？倒不如直接寫到.razor里邊，直接去HttpClient請求第三方資源服務器。

而且還是沒有解決如何兼容Ids4的問題，(⊙﹏⊙)，放棄。

3、HttpClient直接請求帶Token

最后我還是介于上邊兩個方案，綜合了一個辦法，投機取巧的方法：

在.razor中，直接用HttpClient去請求Blog.Core的API，然后Header中增加Token就行，至于這個Token從哪里來，有多個方案：
1、要么寫個api，傳遞username和pwd，來獲取token；

2、要么直接用個輸入框，手動輸入，這個投機方案，不提倡，但是可以自己玩玩兒。

3、寫個登錄頁面；

最終因為不是很擅長Blazor，而且也沒有過多的研究，最終還是選擇的第二種，直接手動輸入吧。

2、HttpClient直接發送Token請求

接下來就是很簡單的沒有啥技術含量了：

1、編輯表單增加Token輸入框

<div><div class="form-group"><label>令牌</label><input @bind="BlogArticle.Token" class="form-control" /></div><div class="form-group"><label>標題</label><input @bind="BlogArticle.btitle" class="form-control" /></div><div class="form-group"><label>分類</label><input @bind="BlogArticle.bcategory" class="form-control" /></div><div class="form-group"><label>外鏈</label><input @bind="BlogArticle.bsubmitter" class="form-control" /></div><div class="form-group"><label>副標題</label><input @bind="BlogArticle.bcontent" class="form-control" /></div><div class="form-group"><label>閱讀</label><input @bind="BlogArticle.btraffic" class="form-control" /></div><button class="btn btn-primary" @onclick="TrySave">保存</button><CancelBtn Name="取消"></CancelBtn></div>

效果是這樣的：

這個Token令牌從哪里來呢，很簡單，我目前是簡單寫了一個API從Ids4項目生成的，然后手動輸入的，你也可以寫個登錄頁面來獲取（不要告訴我，你還不會通過postman從ids4項目獲取token）。

2、HttpClient添加Header

既然要鑒權，然后從Blog.Core中獲取指定的資源數據，那就必須仿照前后端分離項目，在Header中添加Authorization信息。

private async Task OnSaveAsync(BlogArticle blogArticle){BlogArticle = blogArticle;// 通過雙向綁定，從子組件中獲取token，并添加到Header中Http.DefaultRequestHeaders.Add("Authorization", $"Bearer {BlogArticle.Token}");var result = await Http.PostAsJsonAsync("http://apk.neters.club/api/Blog/AddForMVP", BlogArticle);if (result.IsSuccessStatusCode){NavManager.NavigateTo("/blog/list");}else{// 如果失敗了，必須刷新頁面，因為這個時候HttpClient已經失效了_errmsg = "保存失敗! 錯誤原因：" + result.ReasonPhrase + "。請刷新頁面重試";}}

除了添加Header以為，另一個知識點就是需要刷新頁面了，這個還是和我們平時訪問api還是不一樣的，就算是你生命周期設置了瞬態也不行：

services.AddTransient<HttpClient>();

很值得研究。

3、效果預覽

簡單處理了以后，就可以看看效果了，如果沒有登錄呢，會報錯：

然后輸入正確的Token后，就可以寫入成功了。

3、總結

說句實話，對第三方資源服務器的請求和加權，應該有更高級的玩兒法，相信社區的小伙伴一起可以集思廣益吧，未來還是很有希望的。固步自封，最終逃不掉失敗的命運。

總結

以上是生活随笔為你收集整理的如何给Blazor.Server加个API鉴权？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。