三、用nodejs实现JWT鉴权

ps：若有不理解的看我写的nodejs连数据库的，前面的代码放到那里了

登录验证成功后，后端给了个tocken，然后把tocken放到里面

（1）新建文件夹

（2）下载JWT相关npm的依赖包

npm install jsonwebtoken --save

（3）中间件书写

/**
 * jwt中间件，中间件就是一个函数，有next()方法
 */
/**
 * 引入token
 */
const jwt = require('jsonwebtoken');
/**
 * @author 作者名
 * @description 密钥
 */
const jwtSecret = 'jwtSecret'
/**
 * @param { object } data 用户信息
 */
const setToken = (data,expiresIn) =>{
    //sign 签名
    //expiresIn 过期时间60，"2 days" "10h" "7d"默认毫秒为单位
    //algorithm 加密算法
   return jwt.sign(data, jwtSecret, {algorithm: 'HS256', expiresIn:expiresIn? expiresIn : '1d'})

}
 /**
     * 验证用户的身份令牌
     * 解码返回解码，并且打印
     */
 const verifyToken = (token) =>{
    const data = jwt.verify(token, jwtSecret)
    console.log(data);
    return data;
}
module.exports={
    setToken,
    verifyToken
}

（4）引用打印测试

const jwt = require('../Midware/jwt');

console.log(jwt,'jwt')

全部代码

const express = require('express');
const router = express.Router();
const Dao = require('../Dao/index');
const jwt = require('../Midware/jwt');
router.post('/login', (req, res) => {
        console.log(jwt,'jwt')
        const sql = "SELECT * from user where username = ?"
        Dao.db.query(sql,req.body.username,(err,result)=>{
        // console.log(result,'用户名密码');
        if(req.body.password == result[0].password){
            /**
             * 生成token
             */
            const userInfo = {
                username:result[0].username,
                mobile:result[0].mobile,
                email:result[0].email,
            }
           const token = jwt.setToken(userInfo,'1h')
               res.send({
                code:200,
                data:{
                    msg:'登录成功',
                    data:{
                        token
                    }
                }
            })
        }else{
            res.send({
                code:200,
                data:{
                    msg:'登录失败',
                    data: []
                }
            })
        }
    })
})
module.exports = router

（5）使用nodemon

// 不用一直node .\nodejs重启了

npm install -g nodemon

然后使用这个启动命令就行

nodemon .\index.js --watch

（6）实现登录的token存储

// 连接上接口

ps：这是上次的二的接口，不用改

打印出来了调用成功

在login的index.vue内

添加token本地存储

 const onSubmit = async value => {
          const res = await login({
            username:data.username,
            password:data.password
          })
          console.log(res,"登录日志");
          if(res.data.msg==='登录成功'){
            const token = res.data.data.token
            console.log(token,"token");
            localStorage.setItem('token',token)
            router.push('/home')
            Toast('登录成功')
          }else{
            Toast('用户名或密码错误')
          }
        };

（7）axios请求拦截器添加token

//axios基础的封装
/**
 * 前端axios封装，但是调用后端的时候不能使用。
 * 调用nodejs可以使用
 */
import axios from "axios"

const httpInstance = axios.create({
    baseURL: 'http://localhost:3000',//根域名
    timeout: 5000//超时时间5s
})
// axios请求拦截器
httpInstance.interceptors.request.use(config => {
  console.log(config);
  //统一设置请求头
  config.headers={
    'Content-Type': 'application/json;charset=UTF-8',//请求体格式
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
  //统一设置token
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = 'Bearer ' + token
  }
    return config
  }, e => Promise.reject(e))
  
// axios响应式拦截器
httpInstance.interceptors.response.use(res => res.data, e => {
    return Promise.reject(e)
  })
  

export default httpInstance//导出

请求一下

（8）显示userInfo的信息

router.post('/userInfo',(req,res)=>{
    console.log( req.headers.authorization,'authorization');
    const token = req.headers.authorization.split(' ')[1]
    const userInfo = jwt.verifyToken(token)
    if (userInfo){
        res.send({
            code:200,
            data:{
                msg:'获取用户信息成功',
                data:userInfo
            }
        })
    }
})

在项目中调用

1.加入接口

export const getUserInfo = () => {
  return axios.request({
    /**
     * nodejs接口
     */
    url: "/api/User/userInfo",
    method: "post",
  });
};

2.调用接口

  import { login , getUserInfo} from '../../api/api'

      const onSubmit = async value => {
          const res = await login({
            username:data.username,
            password:data.password
          })
          console.log(res,"登录日志");
          if(res.data.msg==='登录成功'){
            const token = res.data.data.token
            console.log(token,"token");
            localStorage.setItem('token',token)
            router.push('/home')
            Toast('登录成功')
            //登录成功后存储信息
            userInfo()
          }else{
            Toast('用户名或密码错误')
          }
        };
const userInfo = async()=>{
          const res = await getUserInfo();
          console.log(res,"用户信息");
        }

最后看一下结果