jwt的token认证完整创建流程

第一步：在后端下载插件

$ npm i jsonwebtoken

第二步：在后端routes的users.js页面引入jwt，并在需要的部分生成令牌返回

//引入
var jwt = require('jsonwebtoken');
//登录时：
router.post('/login',(req,res,next)=>{
  var body = req.body;
  UserModel.findOne(body).then((info)=>{
    if(info){
      // 生成加密的token令牌
      jwt.sign({ username : body.username }, 'abcdef', function(err, token) {
        res.json({code : 0,errmsg : 'ok',token});});
    }
    else{
      res.json({
        code : -1,
        errmsg : '登录失败'
      });
    }
  }).catch((err)=>{
    res.json({
      code : -1,
      errmsg : '登录失败'
    });
  });
});

第三步：token验证

router.get('/info',(req,res,next)=>{
  var token = req.headers.token;
  //进行token解码，验证是否是合法的token
  jwt.verify(token, 'abcdef', function(err, decoded) {
    if(err){
      res.json({
        code : -1, 
        errmsg : 'token错误'
      });
    }
    else{
      res.json({
        code : 0,
        errmsg : 'token正确',
        username : decoded.username
      });
    }
  });
});

第四步：在前端接收token并进行本地存储

// 把token存到本地
localStorage.setItem('token' , res.data.token);

第五步：在router的index.js中布置路由守卫

//全局前置守卫，所有的路由都会走到这里
router.beforeEach((to, from, next) => { 
  if( to.path == '/login' || to.path == '/register' ){
    next();
  }
  else{
    axios.get('/api/users/info').then((res)=>{
      if(res.data.code == 0){
        next();
      }
      else{
        next('/login');
      }
    }).catch(()=>{
      next('/login');
    });
  }
})

第六步：在main.js中设置拦截器

axios.interceptors.request.use(function (config) {
  // 每次发起axios的时候，就会把token带给后端
  config.headers.token = localStorage.getItem('token');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});