TP6.0框架-----Ajax登录

1.前端

        前端登录表单就是普通的登录表单，只是加上了验证码和token验证，因为是ajax登录，所以需要引入jQuery

        验证码（首先需要composer下载，其次还需要开启session）：

<div>{:captcha_img()}</div>

        ajax（url需要自行更改）：

<meta name="csrf-token" content="{:token()}">

$.ajax({
    url: '../login/check',
    data: {
        account: account,
        password: password,
        code: code,
    },
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    // headers: {
    //     'X-CSRF-TOKEN': "{:token()}"
    // },
    type: 'post',
    dataType: 'json',
    success: function (res) {
        // console.log(res.msg);
        res.code == 0 ? alert(res.data) : res.code == 200 ? location.href = '../goods/list' : alert(res.msg);
    }
})

        【在这里我添加了token验证，在TP6.0框架手册中：表单令牌 · ThinkPHP6.0完全开发手册 · 看云，也有使用介绍，我这里，对他进行了小处理，只需要在ajax中添加headers这一行代码即可，这一行代码，也就是手册上想要表达的意思（可以根据jQuery中获取对象的属性来进行理解）。】

但是，经过几天的验证，还是得根据手册上的来，加两行代码

---

2.后端

try {
    $check = $request->checkToken('__token__');
    if (false === $check) {
        throw new ValidateException('令牌数据无效');
    }
    $account = $request->post('account');
    $password = $request->post('password');
    $code = $request->post('code');
    //dd(encyptPassword($password));
    validate(\app\admin\validate\Login::class)->check([
        'account' => $account,
        'password' => $password,
        'code' => $code,
    ]);
    $data = Db::table('tpshop_user')->where('username', $account)->find();
    if ($data) {
        if ($data['password'] == encyptPassword($password)) {
            if (captcha_check($code)) {
                Session::set('account', $account);
                return json([
                    'code' => 200,
                    'msg' => '登录成功',
                ]);
            } else {
                return fail(2003, '验证码错误');
            }
        } else {
            return fail(2002, '密码错误');
        }
    } else {
        return fail(2001, '账号错误');
    }
} catch (ValidateException $e) {
    // 验证失败 输出错误信息
    //Log::record('测试日志信息');
    $errors = $e->getError();
    return fail(0, '登录失败', $errors);
}

我将token和验证码放在了独立验证器外面进行验证，方便出来我想实现的效果，如果将token放在独立验证器里面验证，则会出现必须将账号非空验证成功后才能验证token，如果有更好的方案，希望多多评论，谢谢

        封装方法：（app/admin/common.php）

/**
 * 密码加盐
 */
if (!function_exists('encyptPassword')) {
    function encyptPassword($password)
    {
        $str = 'jq';
        return md5($str . $password);
    }
}


/**
 * 公共响应方法
 */
if (!function_exists('responses')) {
    /**
     * @param $code
     * @param $msg
     * @param $data
     * @return \think\response\Json
     */
    function responses($code, $msg, $data)
    {
        return json([
            'code' => $code,
            'msg' => $msg,
            'data' => $data
        ]);
    }
}

/**
 * 公共响应成功方法
 */
if (!function_exists('success')) {
    /**
     * @param int $code
     * @param string $msg
     * @param array $data
     * @return \think\response\Json
     */
    function success($code = 200, $msg = '访问成功', $data = [])
    {
        return responses($code, $msg, $data);
    }
}

/**
 * 公共响应失败方法
 */
if (!function_exists('fail')) {
    /**
     * @param int $code
     * @param string $msg
     * @param array $data
     * @return \think\response\Json
     */
    function fail($code = 2001, $msg = '参数错误', $data = [])
    {
        return responses($code, $msg, $data);
    }
}

       

        关于独立验证器验证：

validate(\app\admin\validate\Login::class)->check([
                'account' => $account,
                'password' => $password,
                'code' => $code,
            ]);

        check()：表示向独立验证器中传入的参数，注意需要是关联数组的形式

//独立验证器
protected $rule = [
        'account' => 'require',
        'password' => 'require',
        'code' => 'require',
    ];

这里我没有验证token和验证码，放在了独立验证器外面，方便实现所需要的效果，大家如果有更好地展示效果的方法，希望能够评论，谢谢

token与验证码的异同点：

        1.使用前都需要先开启session

        2.验证码需要composer安装，token需要引入header

        3.都是一次性的，验证过后就会被销毁，不可重复使用

（内容比较简陋，后期会进行补充，大家有更好的建议或是想法，可以留言讨论，有错误希望帮我指出来，谢谢大家！）