实现Token鉴权和图片上传的前端开发技巧

在本篇博客中，我们将深入探讨前端开发中实现Token鉴权和图片上传的相关技术。这些技术对于构建安全可靠的Web应用至关重要。

实现Token鉴权

什么是Token鉴权？

Token鉴权是一种通过令牌进行身份验证的机制。在这种机制下，前端应用通常会向后端发送包含用户信息的Token，后端则根据Token来验证用户的身份和权限。例如浏览器的Cookie或LocalStorage中，以便在需要访问后端API时，将该Token发送给后端进行身份验证。后端在验证Token的有效性后，会根据Token所代表的用户身份等信息，返回相应的数据或执行相应的操作

JWT生成与验证

JWT是一种开放标准（RFC 7519），用于在网络传输中传递信息。它是基于JSON格式的，包含三部分：Header（头部）、Payload（负载）和Signature（签名）。其中，Header和Payload都是JSON格式的数据，Signature是Header和Payload的加密字符串，用于验证Token的有效性。
JWT的生成过程如下：

安装jsonwebtoken用于生成token

在node全局环境下安装jsonwebtoken

npm i jsonwebtoken

 导入jsonwebtoken

const jwt = require('jsonwebtoken')

 全局配置文件

 index.js放在根目录下

// 生成token的配置项
const config = {
  jwtSecretKey : 'zhangsan_admin', //密钥
  expiresIn : '5m', // 有效期，分钟
}

 使用sign方法生成token字符串，并进行加密

 语法 ： jwt.sign(参数1，参数2，参数3)

 参数1 ：前端传过来的用户名、密码以及其他数据

 参数2 ：后端定义的生成token的密钥

 参数3 ：token的有效期

加密前先处理用户信息，将用户的敏感信息置空，代码如下

// 在服务器端生成 Token 字符串
const user = {
...result[0], // 解构用户信息
password: '', //密码等敏感信息置空
}
// 对用户的信息进行加密，生成 token 字符串
const tokenStr = jwt.sign(user, config.jwtSecretKey, {
expiresIn: config.expiresIn //tonken 有效期
})
// 对用户传过来的token进行解密，解析出用户的数据
const decoded = jwt.verify(tokenStr, config.jwtScretKey)

生成的token通过verify方法解析出来的数据有用户传过来的数据生效时间和失效时间

登录成功后将生成的token返回给客户端

// 调用 res.send 将Token响应给客户端
res.send({
    status: 0,
    msg : '登录成功',
    data: {
        user: acocunt,
        token: 'Bearer ' + tokenStr,
    },
})

users路由模块和登录注册函数.js的完整代码

var express = require('express');
var router = express.Router();
const app = express()

// 导入生成Token的包
const jwt = require('jsonwebtoken')

// post中间件
app.use(express.json()) // 解析json参数
app.use(express.urlencoded({ extended : true }))

// 生成token的配置项
const config = {
  jwtSecretKey : 'zhangsan_admin', //密钥
  expiresIn : '5m', // 有效期，分钟
}

const user = {
  acocunt : 'admin',
  password : '123456'
}

// 生成token
const tokenStr = jwt.sign(user, config.jwtSecretKey, {
  expiresIn : config.expiresIn
})

/**
* POST 用户登录
* @param acocunt 用户名
* @param password 用户密码
*/
app.post('/users/checkLogin', (req, res) => {
  const acocunt = req.body.acocunt
  const password = req.body.password
  const user = {
    acocunt : acocunt,
    password : ''
  }

  const tokenStr = jwt.sign(user, config.jwtSecretKey, {
    expiresIn : config.expiresIn
  })

  if(acocunt === '张三' && password === '666') {
    res.send( {
      code : 0,
      msg : '登录成功',
      data : {
        acocunt : acocunt,
        token : 'Bearer ' + tokenStr
      }
    } )
  } else {
    res.send( {
      code : 1,
      msg : '登录失败'
    } )
  }
  
})

app.listen(3000, () => {
  console.log('启动');
})

解析token中间件

安装解析中间件

npm i express-jwt 或 pnpm i express-jwt 或 yarn add express-jwt

在index.js中引入

//token解析中间件 一定要在路由之前配置解析 Token 的中间件
const { expressjwt } = require('express-jwt')

注册全局中间件并解析token

// 注册全局中间件 链式调用 unless 方法，接收一个配置对象，path 字段设置一个正则表达式，
表示不需要 token 身份认证的路由前缀。
app.use(expressjwt({
// 加密时设置的密钥
secret: config.jwtSecretKey,
// 设置算法
algorithms: ['HS256'],
}).unless({
    path : ['/users/checkLogin']
  })
)

注册全局错误中间件 当token失效时返回信息

app.use((err, req, res, next) => {
    if(err.name === 'UnauthorizedError') {
        return res.send({ code: err.status, msg: err.inner.message })
    }
    next()
})

图片上传

在Web开发中，图片上传是一个常见的需求。为了处理这个任务，Node.js社区提供了许多工具和库。其中最流行的之一就是Multer，它是一个Node.js中间件，用于处理multipart/form-data类型的数据（通常用于上传文件）。

图片上传的两种方法：

1、直接把图片文件的二进制保存在数据库中，但此种方式太占用数据库空间了，极大的影响了性能，所以目前没有用这种方式

2、把图片文件上传到服务器的某个目录中（文件服务器），然后接口把该文件在目录中的位置（下载地址url）返回给前端。目前均采用该方式实现

准备工作

在开始之前，确保你已经安装了Node.js，并且对Express框架有一定的了解。此外，通过npm安装Multer模块也是本文所必需的。

以下是本文所用到的依赖包以及版本。

首先，我们会介绍Multer的基本概念和用法，包括如何在Express应用中集成Multer以及设置文件上传的一般步骤。

npm install multer

开启服务，测试接口

1、开启服务，在index.js中编写以下代码

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
// 创建 app 实例
const app = express()
// 开启跨域支持
app.use(cors())
// 解析表单
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
// * 简单测试接口，后面会删掉
app.get('/', (req, res) => {
res.send('ok')
})
// 开启监听服务
app.listen('3001', () => {
console.log('express serve running at http://localhost:3001');
})

然后在终端输入nodemon index.js命令开启服务

使用multer上传

const express = require('express')

const multer = require('multer')

// 处理上传逻辑
const storage = multer.diskStorage({
  destination : 'public', // 上传文件存放的目录
  filename(req, flie, cb) { // 上传文件的文件名，注意：上传文件必须要重命名
    console.log(flie);
    console.log(req);
  }
})

const multerConfig = multer({
  storage : storage,
  limits : {
    fileSize : 5 * 1024 * 1024
  }
})

const app = express()

// post请求参数的中间件
app.use(express.json())
app.use(express.urlencoded( {extended : false} ))

app.post('/upload', multerConfig.single('file'), (req, res) => {
  console.log(req.body);
  res.send('测试')
})

app.listen(3000, () => {
  console.log('启动');
})

开启静态资源服务

app.use(express.static('img'))

然后再打开图片地址，就可以成功访问上传到服务器内的图片了！

 

通过本篇博客，读者将全面了解如何在前端项目中实现Token鉴权和图片上传功能。这些技术对于构建安全可靠的Web应用十分重要。我们希望读者能够从中获得实质性的知识，并将其应用到实际的项目中。