技能学习：学习使用Node.js + Vue.js，开发前端全栈网站-12-3.登陆的token验证（校验登录）

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 server

npm 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判断结果传给前端→如已登录运行接口（若未登录跳转登录页）→返回数据，我们的搭建过程就是对每个步骤进行逐一寻找找方法、解决。
另外，在某些没有使用接口的页面上，比如新建广告位功能，在保存之前没有任何接口操作，页面就不会进行强制跳转登录页面的动作。所以我们需要做前端路由校验，见下篇文章。