token验证的实现方式很简单，只需要在所有后端接口中添加一个验证是否存在token的中间件即可，接口的访问过程是调用→运行→返回数据。所以我们在接口调用之后、运行之前的位置加一个验证token的函数作为接口的中间件，从而验证到非登录人员，将其页面跳转到登陆页面即可。
1.在server端获取admin端sessionStorage（或localStorage）存储的token
我们要通过将sessionStorage传入请求头的方式在server端获取页面存储的token。这样做可以避免修改每一个接口（在每一个接口中获取token，再传到后台），后台可以直接在请求头中获取需要的token值。
方法是：在http.js中全局设置获取token，将token值传入请求头**Request
Headers**中，然后后台接口中直接从请求头中获取token，从而实现验证。
（1）使用axios里的Interceptors方法
在npm官网查询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 ' + sessionStorage.token
return config;
}, function (error) {
return Promise.reject(error);
});（2）server后端接口处接收请求头中的token值
server/routes/admin/index.js，添加中间件后的新建数据接口：
// 新建数据（增）
router.post('/', async(req, res, next) => {
// 获取请求头中的token
// 1.前端的authorization首字母大写,后端小写,自动对应
// 2.获取到的有可能为空值
// 3.由于根据代码规范传入的token值带有Bearer和空格,所以用split方法找到空格,在空格处分离Bearer和token值形成数组
// 4.再使用pop方法提取数组中最后一个值(也就是token值)
const token = String(req.headers.authorization || '').split(' ').pop()
// 使用jwt提取token数据(解密),当时我们传入的是用户id,所以解密出的就是用户id和一个自带参数
// 引入jsonwebtoken
const jwt = require('jsonwebtoken')
// 1.jwt的verify为解密方法
// 2.解密方法与加密方法相同,对token进行解密,需要用到全局定义的secret密钥
// 3.利用解构赋值{}方法将id解构
const { id } = jwt.verify(token, app.get('secret'))
// 利用id查找是否有此用户id,以防伪造jwt登录
// 引入model模型
// const Admin = require('../../models/Admin')
// 查询id,将查询到的user放入req,方便其他接口也能够使用
// req.user = await Admin.findById(id)
console.log(id)
// 执行下一步
await next()
}, async(req, res) => {
// const Model = require('../../model/' + req.params.resourse)
const model = await req.Model.create(req.body)
res.send(model)
})新建一个分类，测试查看终端查询到的req.user：
没问题，查看Request Header:
3.http-assert 验证提示工具
如果登陆异常状态下无故跳转到登录页，用户会以为网站有问题吧，所以我们要像登录接口一样，发送错误状态码和错误信息。
我们在登录接口中使用的发送错误信息方式是：
// 如果用户名为空
if(!username){
return res.status(422).send({
message: '请输入用户名'
})
}有一个工具，可以用一行代码将这一段替代，http-assert(用于测试函数、值是否存在、是否正确的工具包)。
使用方法：
cd servernpm i http-assert安装并引入：
使用方法：
// 如果用户名为空
// if(!username){
// return res.status(422).send({
// message: '请输入用户名'
// })
// }
// assert方式修改后
assert(username, 422, '请输入用户名')
// 是否有username, 没有就报错422， 报错信息是‘’
测试：
报错422没问题，但是message没有接收到。是因为http-assert是以抛出异常的方式进行报错的，前端无法获取到json数据。
所以我们要写一个错误处理函数，对抛出的异常做处理，将异常中的内容进行捕获并传给前端admin。
// 错误处理函数（中间件）
app.use(async(err, req, res, next) => {
// 如果发送错误码，将错误码放到res输出到前端显示
// 如果获取不到状态码，就是500错误，所以状态码报错或500报错
res.status(err.statusCode || 500).send({
message: err.message
})
})
在登录页测试，没问题：
可以将此类操作都改成这个格式，我这里只在token判断中间件里添加：
删除sessionStorage中的登录状态token：
新建数据进行测试，出现了新问题:
意思是jwt格式错误，是jwt包传递过来的信息，被我们接收并打印出来了。我们看一下Request Header:
应该是我们将token值删除后，jwt不认识undefined，不能将其定义为空，所以我们在前端admin的http.js拦截器函数中进行修改：
测试：
没问题。
4.如果token验证未登录，跳转登录页。
任何操作中，若验证出现token报错，直接跳转到登录页即可，我们可以使用错误处理函数，将所有token相关的报错码写为401，当报错401统一跳转页面到登录页。
修改http.js响应拦截函数：
要想使用路由，该页面上方要引入：
测试：
成功跳转登录页。
5.封装token中间件
中间件内容很多，如果将每个需要用到这个中间件的接口都赋值此段内容，代码就会异常多且乱，所以我们将它封装成一个函数，使用到时直接把函数名放入即可。
封装：
使用，在除登录接口以外admin使用的接口都使用此中间件：
sessionStorage.clear()测试：
只要使用到接口的地方，就会直接跳转登录页。
6.上传图片的接口错误解决
当我们给图片上传接口也添加token中间件后，突破就无法上传了。
依然报错401：
看一下network里边的接口调用情况，Request Header没有带上Authorization：
这是因为我们请求拦截过程中使用的是axios方法中的拦截方法，但是图片上传我们用的是elementUI自带的上传请求库进行图片的上传。
所以修改图片上传功能，SkillSet.vue、AdSet和富文本编辑器等使用到图片上传功能页面中图片上传加一个传递header的方法:
（1）在全局添加token到header的方法，使用mixin()全局定义方法：
（2）使用全局定义的getAuthHeaders()函数方法：
在新建技能页面测试：
没问题，之后我们在所有图片上传的组件中添加:headers="getAuthHeaders()"即可。
7.总结
只要我们确立好实现token验证的过程方向后就可以完成这个功能。登录的token验证过程非常简单，就是调用接口→发送token→接收token→判断token→将token判断结果传给前端→如已登录运行接口（若未登录跳转登录页）→返回数据，我们的搭建过程就是对每个步骤进行逐一寻找找方法、解决。
另外，在某些没有使用接口的页面上，比如新建广告位功能，在保存之前没有任何接口操作，页面就不会进行强制跳转登录页面的动作。所以我们需要做前端路由校验，见下篇文章。
