vue使用token进行身份验证和会话保持

工具：vue + nodejs(express)

简单的说一下思路，如果demo中有错误或者考虑不周全的地方希望各位指出共同进步。

在登陆之后在我们的node.js服务器上使用md5将session与userID进行加密。将加密后的值token存储在session中，并且将userID保存在session中。然后将token的值返回给客户端。客户端使用sessionStorage将token的值存储。当跳转的目标路由需要登陆验证的时候，发出验证请求。如果有效，则next（）跳转到目标路由。否则，跳转到login路由。

那么，现在开始demo。

 

1.登陆成功，vue使用session Storage保存token

 

注意：axios请求需要在config目录下的index.js中配置服务器代理

参考：vue-cli配置服务器代理

login: function () {
    this.axios.post('api/user/login', {    //vue axios发出请求
            userID: this.userID,
            userPwd: this.userPwd
    })
      .then( res => {                      //注册回调函数  
        if (res.data.err === 'ok') {
            sessionStorage.token = res.data.token    //将返回的token储存在sessionStorage里面
        }
    })
}

2,登陆成功，nodejs将session与userID用md5加密生成token。

 

首先我们要先下载crypto

npm install crypto

 

然后在我们的LoginController.js里面引入

const crypto = require('crypto')
var md5 = crypto.createHash('md5')

module.exports = {
    login: function (req, res) {
        let u_id = req.body.userID    //用户登陆账号
            u_pwd =req.body.userPwd   //用户登录密码
            token = ''                //token值
        //数据库查询操作

        function callback (err, data) {    //执行数据库操作的回调函数

            //如果报错或没有查询结果则登陆失败
            if(err || data.length === 0) res.send({err: 'fail'})    
            else {
                req.session.userID = params[0]
                req.session.userPwd = params[1]
                token = md5.update(req.session.userID + req.session).digest('hex')
                req.session.token = token //根据具体情况存放token。此处只是一个demo
                res.send({
                    err: 'OK',
                    token: token,
                    ...
                })
            }
        }
    }
}

3.全局前置守卫-----访问控制

在全局前置守卫应该对需要身份验证的路由页面进行验证。参照：

vue路由元信息

vue全局前置守卫

我这里对所有页面进行身份验证

main.js：

router.beforeEach((to, from, next) => {

  //发出请求，并且将token以参数形式传递给nodejs服务器
  axios.post('/api/user/checkLogin', { 
    token: sessionStorage.getItem('token') || ''    //如果没有token则为空字符串
  })
    .then(res => {

      // 如果没有返回数据则跳转到登陆页面
      if (res.data.err === 'fail') router.push('/login')
      next()
    })
})

4.nodejs-----登陆验证

LoginController.js：

module.exports = {
    ...,
    checkLogin: function (req, res) {
        let userID = req.session.userID
            token = req.body.token    //获取到请求的token

        //将参数中的token与session中的userID加密后得到的值与session中的值比较
        //如果相等，则说明身份有效
        if (req.session.token === md5.update(userID + token).digest('hex'))
            res.send({err: 'OK'})
        
        //不匹配身份失效
        else res.send({err: 'fail'})
    }
}

以上就是一个小demo，意在于对token的身份验证有个初步的了解。肯定有不完善的地方，希望各位各位指出，谢谢