场景

我们可以使用 cookie,session,token 来做鉴权。
下面我们来看一下，
如何使用 token 来做鉴权

jwt.sign 的简单介绍

npm install jsonwebtoken 下载

使用 jsonwebtoken 生成token的基本语法。
jwt.sign（payload， secretOrPrivateKey， [options， callback]）
第1个参数 payload:可以是表示有效 JSON 的对象文本、缓冲区,字符串。
需要注意的是：如果不是缓冲区或字符串，使用 JSON.stringify
下面我们使用对象文本，就不需要使用 JSON.stringify。

第2个参数 secretOrPrivateKey: 是一个字符串（utf-8编码）、缓冲区、对象。
就是说是加密数据。

options：包含的其他选项，如过期时间，
它的选项有：expiresIn 过期时间，如果是数字，单位就是秒。
algorithm: HS256 (默认的算法)

callback：回调函数，包含返回来的错误

使用 jsonwebtoken 生成token

// 生成的token。 expiresIn 数值单位默认是秒s
//expiresIn也可以添加为 expiresIn:'10h' | '10d'
let createToken = jwt.sign({
  data: 'jiamideshuju'
}, 'lingpai', { expiresIn: 3 });
//  expiresIn: 3 表示的是有效时间是3s。
console.log('生成的token', createToken)

查看生成的token是否过期

// 生成的token。
let createToken = jwt.sign({
  data: 'jiamideshuju'
}, 'lingpai', { expiresIn: 3 });

console.log('生成的token', createToken)

setTimeout(()=>{
  // 查看token是否过期
  var decoded = jwt.verify(createToken, 'lingpai')
  console.log('4s后token是否过期', decoded)
},4000)

封装生成token与验证token是否过期

utils/createTokenCheck.js文件

// 引入 jsonwebtoken
let jwt = require('jsonwebtoken');

let lingpai = 'weislingpai'
const createTokenCheck = {
  // 生成的token。并设置过期时间
  getToken(jiamiData,expiresIn=3){
    return jwt.sign({
      data: jiamiData
    }, lingpai, { expiresIn: expiresIn })
  },
  // 检查token是否过期
  verify(token){
    try {
     return jwt.verify(token, lingpai)
    } catch (error) {
      // 如果报错返回false.[因为token有可能过期，就会报错]
      console.log('error:', error)
      return false
    }
  }
}
// 暴露出去，其他地方调用就行
module.exports = createTokenCheck


app.js文件调用

const createTokenCheck =require('./utils/createTokenCheck')
let token= createTokenCheck.getToken('zhangsan',2)
console.log('不会过期', token)
setTimeout(() => {
  let data=createTokenCheck.verify(token)
  console.log('过期返回false', data)
}, 3000);

登录验证

前端代码
<template>
  <div>
    <h2>登录页</h2>
    <form action="">
      用户名:<input type="text" v-model="userInfo.user"> <br>
      密  码:<input type="password" v-model="userInfo.password"><br>
      <button @click="handlerLogin">登录</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue'
import axios from 'axios'
const userInfo = reactive({
  user:'',
  password:''
})
const handlerLogin=()=>{
  axios.post('http://127.0.0.1:3000/login', {
    user:userInfo.user,
    password: userInfo.password,
  }).then(res => {
      console.log(res);
  }).catch(error => {
      console.log(error);
  });
}
</script>


app.js

app.post('/login',  function(req, res) {
  console.log('req', req.body)
  //通过req.body接收传递的参数
  let { user, password } = req.body
  // 我们假设用户是这样就会成功
  if(user==='zhangsan'&& password==='123'){
    // 生成token 过期时间设置为10s
    let token= createTokenCheck.getToken('zhangsan',10)
    // 发送token
    res.send({
      code: 'ok',
      msg:'登录成功',
      token:token
    });
  }else{
    res.send({
      code: 'fail',
      msg: '登录失败',
    });
  }
})

无法加载响应数据: No data found for resource with given identifier

我们现在需要下载 cors
npm i cors
然后在app.js中引入
const cors = require('cors')
// 放置在路由的前面
app.use(cors())

'req.body' as it is undefined.

//放置在路由的前面
app.use(express.json());

前端接口携带token

携带token

<template>
  <div>
    <h1 class="h1">我是test文件</h1>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
const handlerLogin=()=>{
  axios.post('http://127.0.0.1:3000/list',{},{
    headers:{
      authorization: localStorage.getItem('token')
    }
  }).then(res => {
    console.log(res)
    console.log(res);
  }).catch(error => {
      console.log(error);
  });
}
handlerLogin()
</script>


aap.js代码
const createTokenCheck =require('./utils/createTokenCheck')
// 处理跨域
const cors = require('cors')
const express = require('express')
const app = express()
app.use(cors())
// 处理  'req.body' as it is undefined.
app.use(express.json());
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.post('/login',  function(req, res) {
  console.log('req', req.body)
  //通过req.body接收传递的参数
  let { user, password } = req.body
  // 我们假设用户是这样就会成功
  if(user==='zhangsan'&& password==='123'){
    // 生成token 过期时间设置为10s
    let token= createTokenCheck.getToken('zhangsan',10)
    // 发送token
    res.send({
      code: 'ok',
      msg:'登录成功',
      token:token
    });
  }else{
    res.send({
      code: 'fail',
      msg: '登录失败',
    });
  }
})

app.post('/list',  (req, res) =>{
  let getToken = (req.headers &&  req.headers.authorization) || ''
  if(getToken){
    // 检查token是否过期
    if(createTokenCheck.verify(getToken)){
      res.send({
        code: 'ok',
        list: [
          {name:'张三',grade:98, status:'通过考试'},
          {name:'李四',grade:58, status:'未通过考试'},
          {name:'王五',grade:78, status:'通过考试'}
        ]
      });
    }else{
      res.send({
        code: 'fail',
        list: [],
        msg:'token过期'
      });
    }
  }else{
    res.send({
      code: 'fail',
      list: [],
      msg:'请携带token'
    });
  }
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))