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.都是一次性的,验证过后就会被销毁,不可重复使用
(内容比较简陋,后期会进行补充,大家有更好的建议或是想法,可以留言讨论,有错误希望帮我指出来,谢谢大家!)