2.對接管理后臺的前端vue項目&用戶登錄
上一章 進行到了讓項目跑起來，本章將對接管理后臺的前端vue項目&用戶登錄
項目用到的管理后臺UI框架是vue-element-admin vue2版本，下載地址：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
將下載的文件放到，你想放的位置，如
將項目使用vscode 打開 使用命令先下載依賴環(huán)境npm install運行命令npm run dev如果下載依賴不成功，出現(xiàn)
npm ERR! fatal: unable to access ‘https://github.com/nhn/raphael.git/’: OpenSSL SSL_read:錯誤
由tui-editor 引起的，解決方法：
先刪除 package.json 的 tui-editor 配置項
運行 npm i ?或者 yarn install 會正常編譯。
在手動安裝 tui-editor
npm install --save tui-editor
運行成功，如圖
登錄相關(guān)
接下來，將完成登錄相關(guān)的功能。
abp框架提供了用戶身份驗證（identity server ）的相關(guān)模塊，我們直接使用就行. 可訪問?xxx/.well-known/openid-configuration?查看
可通過
/connect/token接口獲取獲取token
(嚴格來說不應(yīng)該直接訪問/connect/token獲取token。首先應(yīng)該從identityserver發(fā)現(xiàn)文檔/.well-known/openid-configuration中獲取配置信息，然后從/.well-known/jwks 獲取公鑰等信息用于校驗token合法性，最后才是獲取token),奈何實力有限先將就著用
前端想正常訪問接口需要配置跨域 在xxx.Cms.Web項目的appsetting.json 配置前端的域名
xxx.Cms.Web里面在CmsWebModule的ConfigureServices 配置跨域,在OnApplicationInitialization使用?
app.UseCors(DefaultCorsPolicyName)
代碼如下
現(xiàn)在可以愉快的調(diào)用接口玩耍了~~~ 切換vue項目
先將src/utils/request.js 復(fù)制一份重命名為abpRequest.js（這里為了不讓整個項目的請求報錯，后面將刪除request.js文件）,將abpRequest.js的baseURL改成 'https://localhost:44377'
在sr/api 里面新建abp.js,內(nèi)容如下，主要配置abp基本的請求
在src/store/modeules/app.js 里面添加abp應(yīng)用相關(guān)的信息獲取,getters.js 里面配置
getters.js
app.js
在permission.js 里面添加對獲取請求
?
因為我們已經(jīng)配置了跨域請求，所有能直接正常訪問
接下來繼續(xù)改造abpRequest.js，因為沒有對返回數(shù)據(jù)進行處理這時候的界面還是提示報錯的
解決了基礎(chǔ)請求配置的問題，接下來正式進入登錄相關(guān) 在src/api 建立indentity文件夾(主要用來存放用戶身份相關(guān)的請求)，新建user.js,里面的接口都是對應(yīng)swagger里面
src/api/indentity/user/js
在src/store/modules里的user.js 修改獲取token以及獲取用戶信息等操作
獲取token的接口參數(shù)要特別注意一下，本人被耗在這里幾個小時 ~~ ~
clientSetting里面的參數(shù)要從YiAim.Cms.Dbmigrator里面的 appsertting.json里面找
初始化在YiAim.Cms.Domain，具體請看源代碼
默認初始可以授權(quán)的應(yīng)用有4個
至此輸入賬號密碼默認賬號admin/1q2w3E*??token已能正常獲取到！
接下來是獲取用戶相關(guān)的信息，使用接口api/account/my-profile,能正常獲取用戶信息后發(fā)現(xiàn)vue項目并不能跳轉(zhuǎn)
需要我們?nèi)トジ脑煲幌聀ermission.js里面的內(nèi)容同時也需要修改一下src/uitls/auth.js
auth.js
先在permission.js簡單處理一下，讓我們可以看到效果
vue-element-admin的菜單權(quán)限是使用用戶角色來控制的。通過/api/abp/application-configuration接口的auth.grantedPolicies字段，與對應(yīng)的菜單路由綁定，就可以實現(xiàn)權(quán)限控制了。
permission.js
到此，已經(jīng)能正常進入首頁的。
但好像菜單都隱藏了，問題不大下章繼續(xù)解決，本章到此已經(jīng)結(jié)束，不然篇幅就太長了。本章我們完成了與vue-element-admin的接口對接，完成了登錄、應(yīng)用程序基本初始化功能。 下章將要完成的是菜單權(quán)限。
