前后端交互实现的token登录请求

目录

Token验证的基本流程

1.安装两个依赖包

2.1 Token Express后端相关代码

2.2解析token,验证token

2.3登录接口

3.token Vue前端相关代码

3.1axios的基础配置

 3.2获取后端接口

 登录获取Token

登录验证

退出登录

---

Token验证的基本流程

1.服务端收到请求，去验证用户名与密码
2.验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
3.客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
4.客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
5.服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

1.安装两个依赖包

npm install jsonwebtoken --save
npm install express-jwt@6.1.1

2.1 Token Express后端相关代码

定义生成token和获取token的函数
/token/token.js

const jwt = require('jsonwebtoken');
// 密钥
const jwtSecret = 'wanxianshan';  //签名

//登录接口 生成token的方法
// setToken携带的参数及参数的数量自定义
const setToken = function (uname) {
  return new Promise((resolve, reject) => {
    //expiresln 设置token过期的时间
    //{ user_name: user_name, user_id: user_id } 传入需要解析的值（ 一般为用户名，用户id 等）
    // const token = jwt.sign({ user_name: user_name }, jwtSecret, { expiresIn: '24h' });
    const token = jwt.sign({ uname: uname }, jwtSecret, { expiresIn: '24h' });
    // 注意：expiresIn 过期事件，可以调整为24h后过期，10s太短了
    resolve(token)
  })
}
//各个接口需要验证token的方法
const getToken = function (token) {
  return new Promise((resolve, reject) => {
    // 'Bearer hasdghuwhiuwehdfhe.ashdfkhaewfhweiufhweuiof.sldhfjhfjkwhf'
    if (!token) {
      console.log('token是空的')
      reject({
        error: 'token 是空的'
      })
    }else {
      // 验证token
      var info = jwt.verify(token.split(' ')[1], jwtSecret);
      resolve(info);  //解析返回的值（sign 传入的值）
    }
  })
}

module.exports = {
  setToken,
  getToken
}

2.2解析token,验证token

/app.js

const express = require("express")
const app = express()
//express跨域
const cors = require("cors")
// 生成token和验证token是否正确的函数
const vertoken=require('./token/token')

//验证token是否过期，并规定哪些路由不