用户中心项目教程（十）---注册里面的重定向排查和相关的修改

1.注册逻辑的设计和实现

上次说到了的是登录功能，我们使用数据库里面存在的这个存在的账户和密码进行登录，但是是无法进行跳转的，虽然无法跳转，但是可以证明我们的这个整体的逻辑是没有问题的；

接下来就是讨论的如何去实现我们的注册的逻辑了：

首先找到这个和路由相关的配置文件，把上面的那个登录的路由配置cv一下，然后进行相关的修改，就是把path和component进行调换一下就可以了，换成我们的注册的相关urlregister表示的就是注册的意思；

下面的这个是把我们的pages目录下面的这个登录相关的逻辑复制一下，套用到我们的这个登录里面，相当于就是cv，然后根据需求进行修改；

首先需要修改这个const修饰的名字，我们的这个实现的是注册的逻辑，所以原来的login需要进行修改；

下面的这个是我们的tsx里面的最后部分，我们需要把login修改为register即可；

这个时候使用user/register进行验证，会发现进行了重定向，无法成功跳转，接下来说明一下如何解决这个重定向的问题；

2.解决自带的这个重定向的问题

首先需要到我们的app.tsx里面去排查问题，这个apptsx相当于我们的启动文件就是我们的这个项目开始运行的时候，先从这个文件开始扫描，所以这个文件我们需要尤为注意；

我们发现这个fetchUserInfo表示的是获取我们的用户相关的信息，这个里面有push(loginPath)，这个就是我们的重定向的错误源头之一

然后就是这个app.tsx里面还有一个push跳转到登录的代码，就是下面的这个；

接下来我们针对于上面出现的问题进行修改：把那个跳转的代码注释掉；

下面的这个是没有登陆就进行跳转，这个显然是不合适的，我们如果进行注册，他也进行跳转，这个就有点无理取闹了，所以这个地方我们需要优化一下：

我们定了这个白名单，里面是我们的注册和登录的相关的url,然后如果是这两个里面的其中一个，我们直接return，如果不是的话，我们再让这个页面进行跳转；

register里面的index.tsx:因为这个是注册吗，所以这个里面获取用户信息的代码直接删去；

没用的这个相关定义也删除：

等待抓取用户信息的这个代码也删除：

我们把页面的那个蓝色的原来写的是登录的部分修改为注册的字样：

我们进行注册的时候，后端是设计了三个参数：账户，密码和校验密码，所以我们需要新建一个表单，这个直接复制上面的密码的，然后把这个提示词修改一下就可以了：

name修改为我们的checkpassword，然后是这个placeholder就是我们的前端上面输入的时候可以看到的这个话语；

这个时候的页面的效果就是下面的这个样子的，我们需要对于那个按钮进行修改，把注册修改为登录；

3.增加属性的相关操作

我们的注册是三个属性，因此这个时候我们需要修改注册的属性：

按住ctrl点击下面的这个内容，跳转到源码里面去：

我们的这个登录是两个属性：账户和账户的密码，我们直接把上面的复制一下，在这个基础上面进行修改就=可以了，其实修改的话就是增加一个checkpassword的属性即可；

然后使用的是一键替换：把loginparams修改为我们的registerparams:

4.关于如何修改页面上面的绿色按钮

想要修改原来的那个绿色按钮的字样，我们需要追溯源码：按住ctrl点击下面的这个loginform内容，就会被跳转

跳转之后的页面：

我们点击那个左上角的圆圈，找到下面的那个js文件，点进入：

这个时候出现的submitText里面的内容实际上就是我们的蓝色的按钮的显示字样，所以我们需要对于这个进行修改：

我们的修改不是在原来的基础上面修改，而是把原来的那个默认的属性字样重新定义一下，他就会使用我们定义的内容，而不是默认的内容（源码包里面的内容）

这个时候，我们的前端页面的设计：注册的页面，重定向问题的排查，以及这个蓝色的按钮的字体修改，全部都解决了，我们就开始具体逻辑的实现和设计；