Laravel自定义登录注册页面并使用Ajax进行数据传输

版本Laravel 7.1

自定义登录注册页面

直接修改resources/views/auth下面的login.blade.php和register.blade.php诗最简单的方法。
但是前端给的注册登录是合并在一个页面内的，当然可以复制两份按照上面的步骤，但是考虑到日后维护，我想让注册和登录都指向同一个视图，以后修改就不用同时修改两份。
琢磨良久。
注册页面：
vendor/laravel/ui/auth-backend/RegistersUsers.php

public function showRegistrationForm()
{
    return view('auth.register');
}

修改view函数的参数即可。
登录页面：
vendor/laravel/ui/auth-backend/AuthenticatesUsers.php

public function showLoginForm()
{
    return view('auth');
}

修改view函数的参数即可。

直接修改vendor文件夹内的内容当然不是最好的办法，但我琢磨出来的办法就只有这个。

使用Ajax注册

这里只说注册，登录同理
csrf_token处理
由于laravel自带反csrf攻击，所以我们在post的时候应该传递我们页面的token值，通过csrf_token()函数获取。可作为表单数据传递(name:"_toekn")，也可以写入请求头。

headers: {
    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
},

如何接收并展示后台返回的错误信息
返回错误信息都是在验证阶段返回的，当用ajax时，验证器会返回json数据，我们只要接收数据就可以了。

验证器返回的json结构

{
	"message":"The given data was invalid.",
	"errors":{}
}

errors数组内是具体的错误，并且已经经过语言文件转换。

我们只需要输出errors中所有的错误给用户看就可以了

var res = jQuery.parseJSON(xhr.responseText);
$("#err").html("");
for(var key in res.errors){
	$("#err").html($("#err").html()+res.errors[key]+"
")
}

注册成功如何跳转
laravel注册成功后并不返回json，所以在我们指定datatype:'json'时，就算后端注册成功，我们也无法进入success，所以我们需要在error中继续判断后端成功注册的情况。
通过调用F12查看控制台XHR记录，可以看到当注册成功时，返回的HTTP状态码为201，所以我们只需要判断状态码是否为201即可。

if(xhr.status==201){
    window.location.reload();
}

刷新页面后，由于是已经登录的状态，会自动重定向到home页面。

另外

1. 页面过期时(即token值不匹配)，后端返回419状态码。
2. 已经登录时，后端返回200状态码。

完整Ajax代码

$("#regbtn").click(function(){
    var name = $("#regname").val()
    var email = $("#regemail").val()
    var pwd = $("#regpassword").val()
    var cfpwd = $("#password-confirm").val()
    var flag
    $("#err").html("loading..");
    if(pwd!=cfpwd){
        $("#err").html("两次输入的密码不一致!");
        return false;
    }
    $.ajax({
        type: 'POST',
        url: '{{route('register')}}',
        data: {"password_confirmation" : cfpwd, "password" : pwd, "email" : email, "name" : name, "_token" : "{{csrf_token()}}"},
        dataType: 'json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        },
        success: function(data){
            window.location.replace("{{route('home')}}")
        },
        error: function(xhr, type, errorthrown){
            if(xhr.status==419)
                $("#err").html("页面过期！请刷新页面");
            else if(xhr.status==201){
                window.location.reload();
            }
            else if(xhr.status==200){
                window.location.reload();
            }
            else{
                var res = jQuery.parseJSON(xhr.responseText);
                $("#err").html("");
                for(var key in res.errors){
                    $("#err").html($("#err").html()+res.errors[key]+"
")
                }
            }
        }
    });
});

在Laravel中体会到了面向对象编程的小小弊端，就是不断找父类找到吐。