#### 技能学习：学习使用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"); //根据参数生成了 token
return $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.token
return config
}, function(error){
// 错误处理
return Promise.reject(error)
})
~~~
随便调用一个接口测试：
第二步，后端获取请求头中的token值，并解析token
因为所有接口的调用都需要验证token，所以我们学习tp6的中间件，在每次接口调用时都使用此中间件进行token验证。
middleware/compareToken.php:
~~~
<?php
namespace 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接口，让分类功能与管理员功能使用同一组接口函数。
- tp6+vue
- 1.工具和本地环境
- 2.启动项目
- 3.路由、模型与数据库操作
- 4.优化后端接口,前端使用axios实现接口功能
- 5.用户登录，bcrypt（hash）加密与验证
- 6.用户登录（二），token验证
- 7.分类的模型关联和通用CRUD接口
- 8.使用vue的markdown编辑器并批量上传图片
- Node.js + Vue.js
- 工具,本地环境
- 2.1启动项目
- 3.element-ui和vue-router路由的安装和使用
- 4.使用axios，并创建接口上传数据到mongodb数据库
- 5.mongoodb数据库的“删、改、查”操作
- 6.mongodb数据库无限层级的数据关联（子分类）
- 7.使用mongodb数据库关联多个分类（关联多个数据）
- 8.server端使用通用CRUD接口
- 9.图片上传
- 10.vue的富文本编辑器（vue2-editor）
- 11.动态添加分栏上传多组数据
- 12-1.管理员模块
- 13-1.搭建前台web端页面
- 1.使用sass工具搭建前台web端页面
- 2.sass工具的变量
- 3.使用flex布局并开始搭建web端
- 4.vue广告轮播图，并使用接口引入数据
- 5.使用字体图标（iconfont）
- 6.卡片组件的封装
- 14-1.生产环境编译
- 1.环境编译
- 2.购买域名服务器并解析域名到服务器
- 3.nginx配置web服务器并安装网站环境
- 4.git拉取代码到服务器
- 5.配置Nginx反向代理
- 6.迁移本地数据到服务器（mongodump）
- uni
- 1.工具&本地环境
- 2.页面制作
- 3.页面制作、组件与轮播
- 4.页面跳转与横向滑动
- 5.用户授权登录和用户信息获取
- 6.用户注册和数据存储
- 7.用户填写表单信息