2.对接管理后台的前端vue项目&用户登录
上一章 进行到了让项目跑起来，本章将对接管理后台的前端vue项目&用户登录
项目用到的管理后台UI框架是vue-element-admin vue2版本，下载地址：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
将下载的文件放到，你想放的位置，如
将项目使用vscode 打开 使用命令先下载依赖环境npm install运行命令npm run dev如果下载依赖不成功，出现
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
运行成功，如图
登录相关
接下来，将完成登录相关的功能。
abp框架提供了用户身份验证（identity server ）的相关模块，我们直接使用就行. 可访问 xxx/.well-known/openid-configuration 查看
可通过
/connect/token接口获取获取token
(严格来说不应该直接访问/connect/token获取token。首先应该从identityserver发现文档/.well-known/openid-configuration中获取配置信息，然后从/.well-known/jwks 获取公钥等信息用于校验token合法性，最后才是获取token),奈何实力有限先将就着用
前端想正常访问接口需要配置跨域 在xxx.Cms.Web项目的appsetting.json 配置前端的域名
xxx.Cms.Web里面在CmsWebModule的ConfigureServices 配置跨域,在OnApplicationInitialization使用
app.UseCors(DefaultCorsPolicyName)
代码如下
现在可以愉快的调用接口玩耍了~~~ 切换vue项目
先将src/utils/request.js 复制一份重命名为abpRequest.js（这里为了不让整个项目的请求报错，后面将删除request.js文件）,将abpRequest.js的baseURL改成 'https://localhost:44377'
在sr/api 里面新建abp.js,内容如下，主要配置abp基本的请求
在src/store/modeules/app.js 里面添加abp应用相关的信息获取,getters.js 里面配置
getters.js
app.js
在permission.js 里面添加对获取请求
因为我们已经配置了跨域请求，所有能直接正常访问
接下来继续改造abpRequest.js，因为没有对返回数据进行处理这时候的界面还是提示报错的
解决了基础请求配置的问题，接下来正式进入登录相关 在src/api 建立indentity文件夹(主要用来存放用户身份相关的请求)，新建user.js,里面的接口都是对应swagger里面
src/api/indentity/user/js
在src/store/modules里的user.js 修改获取token以及获取用户信息等操作
获取token的接口参数要特别注意一下，本人被耗在这里几个小时 ~~ ~
clientSetting里面的参数要从YiAim.Cms.Dbmigrator里面的 appsertting.json里面找
初始化在YiAim.Cms.Domain，具体请看源代码
默认初始可以授权的应用有4个
至此输入账号密码默认账号admin/1q2w3E* token已能正常获取到！
接下来是获取用户相关的信息，使用接口api/account/my-profile,能正常获取用户信息后发现vue项目并不能跳转
需要我们去去改造一下permission.js里面的内容同时也需要修改一下src/uitls/auth.js
auth.js
先在permission.js简单处理一下，让我们可以看到效果
vue-element-admin的菜单权限是使用用户角色来控制的。通过/api/abp/application-configuration接口的auth.grantedPolicies字段，与对应的菜单路由绑定，就可以实现权限控制了。
permission.js
到此，已经能正常进入首页的。
但好像菜单都隐藏了，问题不大下章继续解决，本章到此已经结束，不然篇幅就太长了。本章我们完成了与vue-element-admin的接口对接，完成了登录、应用程序基本初始化功能。 下章将要完成的是菜单权限。
