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

版本Laravel 7

自定义登录注册页面

直接修改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]+"<br>")
}

注册成功如何跳转
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]+"<br>")
                }
            }
        }
    });
});

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

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!