JWT的用法

JWT的用法

下载依赖包：

//下载到后端
npm install --save express-jwt
npm install --save jsonwebtoken

在服务器端配置jwt：

配置app.js

var jwt = require('express-jwt');	// 引入jwt模块
var {secretKey,unless,algorithms} = require('./utils/token'); // 引入自定义配置信息

//配置jwt的密钥、加密算法，以及不需要认证的路径，下面代码一定要放在var app = express();的后面
app.use(jwt({secret:secretKey,algorithms}).unless(unless));

配置认证失败时的错误返回方式
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // 如果认证失败返回401状态和invalid token字符串
  if (err.name === "UnauthorizedError") {
    res.status(401).send("invalid token");
  }else{
    // render the error page
    res.status(err.status || 500);
    console.log("error:",err.message);
    res.render('error');
  }
});

登录时完成token的生成：

const jwt = require("jsonwebtoken");
const {secretKey} = require('../utils/token');

// 生成token
let authToken = jwt.sign({user:data}, secretKey);
// 将生成的token返回
res.send({token: authToken});

前端登录时需要将token存储到localStorage中：

// 将返回token信息保存在localStorage
layui.data('tokens', {
key: 'token'
,value: res.token
});

每次请求时需要将token通过请求头传递给服务器，下面通过jquery提供的ajax全局设置来实现：

修改main.js：

const $ = layui.$;
// 每次ajax请求都会将token信息从localStorage中取出并设置到请求头中
$.ajaxSettings.beforeSend = function(xhr,request){
  // 在这里加上你的 token 
  xhr.setRequestHeader('Authorization','Bearer '+layui.data('tokens').token);
}

进入管理界面后判断是否登录：

服务器添加将token解密的接口：

const { secretKey } = require("../utils/token");
const jwt = require("jsonwebtoken");
router.get('/getToken',function(req,res){
 // 获取到客户端发送过来的 token
 const token = req.get('Authorization');
 // 将编码后的 token 再转换回来
 const decode = jwt.verify(token.split(" ")[1], secretKey);
 res.send(decode);
})

浏览器端判断token解密后的内容，在manage.js中添加代码：

// 通过向服务器传递token信息，并得到解密后的内容
$.ajax({
   type:"get",
   url:"/api/getToken",
   success(data){
      if(Object.keys(data).length <= 0){
         window.location = "#login";
        }else{
           $("#username").text(data.user.username);
           next();
            }
    },
    error(){
       window.location = "#login";
    }
});
// 注销
$("#logout").click(function(){
  // 从本地删除token
   layui.data('tokens', {
      key: 'token',
      remove: true
    });
   window.location = "#login";
})