技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-1.工具和本地环境
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-3.路由、模型与数据库操作
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-4.跨域且传输数据,并优化后端接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-5.用户登录（一），密码的bcrypt（hash）加密与验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-6.用户登录（二），token验证
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-7.分类的模型关联和通用CRUD接口
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片

1.生成token

（1）安装jwt包
使用composer方法：

composer require firebase/php-jwt

（2）编写生成token方法

function setToken($password) {$key = "aslfjhasgjgja";$token=array("iss"=>$key,        //签发者 可以为空"aud"=>'',          //面象的用户，可以为空"iat"=>time(),      //签发时间"nbf"=>time(),    //在什么时候jwt开始生效  （这里表示签发后立即生效）"exp"=> time()+1*60*60*48, //token 过期时间1秒*60*60*48=两天"data"=>[           //加入password，后期同样使用password进行比对'password'=>$password,]);$jwt = JWT::encode($token, $key, "HS256");  //根据参数生成了 tokenreturn $jwt;
}

下方调用生成token的方法：

测试：

登录生成token值：

2.验证登陆状态

（1）将token值存入本地缓存（上篇login模板已经写好）：

检查本地缓存：

没问题。
（2）验证token：
我们需要将token值存入发送请求的请求头中，做到只要调用接口，就可以将token一并发送到后端，从而对token登陆状态进行比对验证。
第一步，前端admin端通过请求头将token传值给后端：
在http.js中全局设置获取token，将token值传入请求头Request
Headers中，然后后台接口中直接从请求头中获取token，从而实现验证。
这里使用axios里的Interceptors方法，详细可查阅axios手册：

admin/http.js前端admin端将token传入请求头Request Header：

// 使用axios的interceptors拦截器，将http调用时拦截
http.interceptors.request.use(function(config){// 将token值传入请求头，"bearer + 空格"是代码规范，看到Bearer(持票人)大家就明白是对token的验证config.headers.Authorization = 'bearer ' + localStorage.tokenreturn config
}, function(error){// 错误处理return Promise.reject(error)
})

随便调用一个接口测试：

第二步，后端获取请求头中的token值，并解析token
因为所有接口的调用都需要验证token，所以我们学习tp6的中间件，在每次接口调用时都使用此中间件进行token验证。
middleware/compareToken.php:

<?phpnamespace app\admin\middleware;
use \Firebase\JWT\JWT;class compareToken{public function handle ($request, \Closure $next){// 获取请求头header中的authorization（token值）$token = request() -> header('authorization');// 去除token值中的bearer+空格标识$token = str_replace('bearer ', '', $token);// return response($token);if($token === "undefined"){// abort终止操作，返回结果abort(json(['message' => '登陆状态失效，请重新登录', 'code' => 401], $httpCode = 401));// return response($code);}// key必须与生成token值得字符串相同$key='aslfjhasgjgja'; try {JWT::$leeway = 60;//当前时间减去60，把时间留点余地用于后面的操作$decoded = JWT::decode($token, $key, array('HS256')); //HS256方式，这里要和签发的时候对应// 解析过程中如果出现不对的情况就利用下方catch方法，利用jwt解析问题返回错误信息} catch(\Firebase\JWT\SignatureInvalidException $e) { // token不正确abort(json(['message' => '登陆状态失效，请重新登录', 'code' => 401], $httpCode = 401));} catch(\Firebase\JWT\BeforeValidException $e) { // token过了之前设置的两天期限abort(json(['message' => '登陆状态失效，请重新登录', 'code' => 401], $httpCode = 401));} catch(\Firebase\JWT\ExpiredException $e) { // token过期abort(json(['message' => '登陆状态失效，请重新登录', 'code' => 401], $httpCode = 401));} catch(Exception $e) { //其他错误abort(json(['message' => '登陆状态失效，请重新登录', 'code' => 401], $httpCode = 401));}// 如果没问题，就执行下一步接口函数操作return $next($request);}
}

admin/middleware.php：

<?php
// 这是系统自动生成的middleware定义文件
return [// token验证app\admin\middleware\compareToken::class
];

测试，刷新页面：

没问题，是因为之前我们登录时有token，下一步将localstorage中的token删除：

再次刷新页面测试：

到此token验证成功。
但是还有一个问题，我们无法进行登录，因为登录接口同样使用了token验证中间件。
第三步，路由分组，使用路由中间件
（1）使用路由分组

（2）使用路由中间件
注释掉全局路由：

使用路由中间件，作用于数据库接口路由组：

登录测试，成功登录：

删除localstorage，刷新测试，正确跳转登录：

但是经过多次测试后，发现会报错，说是跨域问题：

但是经过一整天的排查，跟跨域一点关系都没有。是请求request的问题。
说白了就是中间件next()之后request接受不到数据，于是我把return next()放在了函数首部：

至此之后不回出现跨域错误问题。
注意：他娘的tp6框架当你使用了框架内置的跨域之后就不要怀疑跨域会出问题，所有request请求相关问题他都会报错说Cor error，大家不要在跨域上浪费时间！！！我白白浪费一天。
到此后端token验证成功。
但是有些页面没有使用到后端接口，所以不会跳转登陆页面：

所以前端页面我们需要用到vue的导航守卫。

3.导航守卫

此时我们只要调用接口就会解析token，但是进入没有接口的页面就不会跳转。如果我们不想让用户在不登陆的状态下访问我们的所有网页，就需要在前端也设置token判断，做到只要不登录，就无法访问所有页面。
这里我们就需要用到Vue的导航守卫。
大家可以查看我之前的文章进行设置，纯前端操作，不涉及后端：

技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-12-4.登陆的前端vue-router路由验证（导航守卫）

再注意：node.js + vue.js此篇文章使用的是sessionStorage，本篇文章我们使用的是localStorage，大家最终函数处应改为localStorage，否则无法登录。

此时登录功能全部完成，下篇文章我们做分类功能，同时学习通用CRUD接口，让分类功能与管理员功能使用同一组接口函数。

更多设计、功能的学习经验，大家也可以去我的公众号查看！

————