我的项目是使用antd pro的官方文档搭建起来的项目,接下来说一说我在写项目的时候所遇到的问题:
1、只有一个登录接口,无法获取当前用户的信息
由于antd pro这个管理后台模板在登录的时候,使用一个用户登录的接口,还有一个获取当前用户的接口;这就导致我们在只有一个接口的时候,没有办法获取到当前登录用户的信息。以致于无法正确跳转页面。
我用的方法是将登录接口返回给我们的数据放在本地(localStorage),然后将本地的用户信息给到当前用户,即将app.tsx中fetchUserInfo的代码改为:
此时我们不需要更改其他代码,即可跳转。 在跳转结束之后,原本的头像和名字还存在,因此需要将其改掉即可。
关于头像和名字这一块,最重要的是需要将avatarDropdown.tsx中的代码修改一下
以上就是关于登录跳转以及头像名字的设置。
注:ts写的一般都是有各自的数据类型,当前用户currentUser的用的是API.CurrentUser,所以我们需要在type.d.ts中添加有我们自己的用户信息的变量。(也可以不添加,添加之后,会有信息提示,方便我们快速地写代码;前面的是我自己添加,照着下面的写成一样的即可)
2、用户的权限,判断管理页是否出现:
前面我们已经定义了当前用户CurrentUser的信息内容,只需要在access.ts文件中将判断权限的信息改掉即可。
3、一般在使用接口的时候都会遇到跨域的问题:(我是使用代理的方法解决)
将config文件中的proxy.ts改成接口的域名即可,使用的时候只需要写'/api'+除去域名之后的就可以了。
介绍一个微软Edge的一个解决跨域的扩展插件CORS
在微软浏览器上运行将其点一下就可以了,如果显示黄色,就是开着,就可以快速解决跨域。
以上便是我使用antd pro这个模板所遇到的问题以及解决办法。