博客

❤️在繁华中自律，在落魄中自愈❤️

知道token的都不用多介绍，在node js 中使用的时候是需要引入 jsonwebtoken。

导入包

npm install jsonwebtoken -save

一、生成token

//生成token
const generateToken = function (user) {
  let token = jwt.sign({ user }, key, { expiresIn: expir });
  return token;
}

二、验证token

// 校验token(错误会抛出异常)
const verifyToken = function (token) {
  try {
    let tokenKey = jwt.verify(token, key)
    return {
      code: 200,
      msg: '校验成功',
      tokenKey,
    }
  } catch {
    return {
      code: 100,
      msg: '校验失败'
    }
  }
}

他错误返回的值可以根据自己需求来设置，

三、完整的jwt.js 代码

// 引入模块依赖
const jwt = require('jsonwebtoken');
let key = "fuTkisMQQ2j1ESC0cbaQen1ZWmkMdvLx"
let expir = 60 * 30 //30min(token过期的时间)

//生成token
const generateToken = function (user) {
  let token = jwt.sign({ user }, key, { expiresIn: expir });
  return token;
}
// 校验token(错误会抛出异常)
const verifyToken = function (token) {
  try {
    let tokenKey = jwt.verify(token, key)
    return {
      code: 200,
      msg: '校验成功',
      tokenKey,
    }
  } catch {
    return {
      code: 100,
      msg: '校验失败'
    }
  }
}
module.exports = {
  verifyToken,
  generateToken
};

我这里的文件目录图

四、配合express使用token验证

首先就是引入自己封装的生成token和验证token 嘛，这里就是配置除了

/api/login

和

/api/register

接口不验证tokrn，项目中请求其他的接口都会去验证token

const jwt = require('./utils/jwt');// 引入jwt token工具
app.use(function (req, res, next) {
  // 这里知识把登陆和注册请求去掉了，其他的多有请求都需要进行token校验 
  if (req.url != '/api/login' && req.url != '/api/register') {
    console.log(req.url)
    //获取请求头携带的token
    let token = req.headers.token;
    //验证token是否过期
    let result = jwt.verifyToken(token);
    // 如果验证通过就next，否则就返回登陆信息不正确(code == 100就是异常情况)
    if (result.code == 100) {
      res.send({
        code: 403,
        msg: '登录已过期,请重新登录'
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

五、/api/login接口中的配置

大概过程就是在请求接口之后，会在数据库中验证账号密码的有效性，如果有效，就会返回给客户端token，不然是不会下发给客户端token的。

// 登录
app.post('/api/login', (req, res) => {
  console.log(req.route.path)
  var user = req.body.user;
  var password = req.body.password;
  let sql = `SELECT * FROM USER WHERE USER = ${user} AND PASSWORD = ${password}`
  connection.query(sql, function (error, results, fields) {
    if (error) {
      throw error
    } else {
      if (results[0]) {
        let token = jwt.generateToken(user);
        // 将 token 返回给客户端
        res.send({
          status: 200, msg: '登陆成功', token, results
        });
      } else {
        res.send({ status: 201, msg: '账号或者密码错误' });
      }
    }
  });
});

上边所有的就是服务端的配置了。我还是bibi一下前端这边的配置吧，

六、前端请求拦截器和响应拦截

请求拦截器的作用也就是在前端每一次发送请求的时候都携带token，响应拦截的话就是对些特定的响应做一些操作（个人理解，比如说token不合法的情况下可以在前端操作让他跳转到登录的界面啥的…）

这里前端使用vue.js请求用的是axios

//拦截器
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.token = token //请求头加上token
    }
    return config
  },
  error => {
    return Promise.error(error);
  }
)

//响应拦截
axios.interceptors.response.use(response => {
  if (response.data.code == 403) {
    ElementUI.Message.error('当前登录已失效，请重新登录')
    router.replace({ path: '/login' })
  }
  return response;
}, error => {
  return Promise.reject(error.response.data)  //返回接口返回的错误信息
})

在响应拦截的时候是因为我服务端的代码是配置的code = 403 提示登录错误如图，所以我前端这边根据 code = 403来跳转页面到登录界面。



可以参考：

https://www.jianshu.com/p/a0c67f4e145e

各位大佬看完觉得行还是点个赞加个关注再走噻！！！❤️