再来先容一下用户登录鉴权流程
1、用户利用用户名和密码来要求做事器
2、做事器验证用户信息
3、做事器通过验证天生一个token返回给客户端
4、客户端存储这个token，并在后面的每一次要求中在要求头上带上这个token
5、做事端验证这个token token精确就返回数据 token缺点就返回缺点信息
start 首先我们须要一个html表单用于后台的登录
<div id="showpage" style="display: none">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<button type="submit" id="sub-btn" class="btn btn-default">登录</button> <br/>
<p class="bg-warning" style="padding: 10px;">演示用户名和密码都是<code>demo</code></p>
</div>
<div id="user" style="display: none">
<p>欢迎<strong id="uname">
</strong>，您已登录，<a href="javascript:;" id="logout">退出>></a>
</p>
</div>
// 利用axios库
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<script>
let jwt = localStorage.getItem('jwt');
// token 保存在localstorage里面 判断有没有token
if (jwt) {
axios.defaults.headers.common['X-token'] = jwt;
axios.get('user.php')
.then(function (response) {
if (response.data.result === 'success') {
document.querySelector('#showpage').style.display = 'none';
document.querySelector('#user').style.display = 'block';
document.querySelector('#uname').innerHTML = response.data.info.data.username;
} else {
document.querySelector('#showpage').style.display = 'block';
console.log(response.data.msg);
}
})
.catch(function (error) {
console.log(error);
});
} else {
document.querySelector('#showpage').style.display = 'block';
}
document.querySelector("#sub-btn").onclick = function(){
let username = document.querySelector("#username").value;
let password = document.querySelector("#password").value;
var params = new URLSearchParams();
params.append('user',username);
params.append('pass',password);
axios.post(
'user.php?action=login',
params,
);
.then(response) => {
if(response.data.result === 'success'){
// 本地存储token
localStorage.setItem('jwt',response.data.jwt);
// 把token存储到header里面
axios.defaults.headers.common['X-token'] = response.data.jwt;
axios.get('user.php').then(function(response){
if(response.data.result === 'success'){
document.querySelector("#showpage").style.display = 'none';
document.querySelector("#user").style.display = 'block';
document.querySelector("#uname").innerHTML = response.data.info.data.username;
}else{
}
})
}else{
console.log(response.data.msg);
}
}
.catch(function(error){
console.log(error);
});
}
</script>
做事器端
首先利用php-jwt库
利用composer安装php-jwt，吸收到登任命户名和密码后，PHP验证用户名和密码是否精确，如果用户名和密码准确无误，那么就签发token，在token中，我们可以定义token的签发者、过期韶光等等，并返回给前端。把稳在签发token时，我们须要定义一个密钥，这个密钥是一个私钥，实际运用中是保密的不可见告别人。
后台代码user.php
<?php
date_default_timezone_set("PRC"); //系统利用北京韶光
require 'vendor/autoload.php';
use \Firebase\JWT\JWT;
// 私有的密钥
define('KEY', '1gHuiop975cdashyex9Ud23ldsvm2Xq');
// header('Access-Control-Allow-Origin:');
$res['result'] = 'failed';
$action = isset($_GET['action']) ? $_GET['action'] : '';
if ($action == 'login') {
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = htmlentities($_POST['user']);
$password = htmlentities($_POST['pass']);
if ($username == 'demo' && $password == 'demo') { //用户名和密码精确，则签发tokon
$nowtime = time();
$token = [
'iss' => 'http://www.helloweba.net', //签发者
'aud' => 'http://www.helloweba.net', //jwt所面向的用户
'iat' => $nowtime, //签发韶光
'nbf' => $nowtime + 10, //在什么韶光之后该jwt才可用
'exp' => $nowtime + 600, //过期韶光-10min
'data' => [
'userid' => 1,
'username' => $username
]
];
// 天生token
$jwt = JWT::encode($token, KEY);
$res['result'] = 'success';
$res['jwt'] = $jwt;
} else {
$res['msg'] = '用户名或密码缺点!';
}
}
echo json_encode($res);
} else {
$jwt = isset($_SERVER['HTTP_X_TOKEN']) ? $_SERVER['HTTP_X_TOKEN'] : '';
if (empty($jwt)) {
$res['msg'] = 'You do not have permission to access.';
echo json_encode($res);
exit;
}
try {
JWT::$leeway = 60;
$decoded = JWT::decode($jwt, KEY, ['HS256']);
$arr = (array)$decoded;
if ($arr['exp'] < time()) {
$res['msg'] = '请重新登录';
} else {
$res['result'] = 'success';
$res['info'] = $arr;
}
} catch(Exception $e) {
$res['msg'] = 'Token验证失落败,请重新登录';
}
echo json_encode($res);
}
用户每次要求都要带上后端签发的token，后端获取要求中的token，PHP中利用$_SERVER['HTTP_X_TOKEN']就可以获取token值。这个X_TOKEN便是在我们前真个要求header头信息中。
然后PHP拿到这个token后，解密剖析token值，返回给前端即可。
我们可以看到，在用户鉴权的过程中并没有利用Session或者Cookie，做事端无需存储用户会话信息。只用了一个Token串，建立前后真个验证的数据通报，实现了有效的登录鉴权过程。
