加入Token令牌,让你的项目更加安全。

什么是 Token?

Token (通常是指 JSON Web Token,简称 JWT 或其他类型的访问令牌)通常指的是一个字符串,它在客户端和服务端之间传递,用于验证用户身份或授权访问特定资源。

简单来说就是后端根据用户的信息和一串密钥(自定义的)生成一段加密的后的字符串,发送给客户端(一般是用户登录的时候)客户端接受后每次进行对后端接口进行访问都会携带Token返回给后端进行Token检验(Token正不正确或者有没有过期等等...),

能够简化认证过程、提高系统的安全性和性能。今天我们就来简单体验一下jwt常用令牌的使用。

后端Token配置

后端jwt相关的包工具我们安装的是npm 第一下载量的jwt包工具,可以看到下载量非常的恐怖

这是链接jsonwebtoken - npm (npmjs.com)

在后端中进行下面指令即可安装和项目中导入使用

复制代码
npm install jsonwebtoken
const jwt = require('jsonwebtoken');

安装完成后,我们可以去git上面看看使用文档进行使用。一些小伙伴没有魔法那么我这里就为大家详细讲解一下。

创建jwt令牌

这里我们使用的是同步方式来进行创建,

  1. payload 接受的是一个json对象用来进行加密(你可以理解为对谁进行加密)
  2. secretOrPrivateKey 是你用来加密时加入的自己的私钥(防止别人知道账号密码和加密方式后来撞Token,加入私钥后加密时就会将私钥也进行加密这样基本就不可能撞对了,真撞对了怎么办?我的建议是别学了直接去买彩票)
  3. 因为这里我们使用的是同步方式来创建jwt令牌,所以options是一些配置项用来配置token过期时间还有加密方式等等...

下面是简单示范

复制代码
function sign(option) {
    // option 是你传入的json对象(加密对象)
    // 666是我的私钥
    return jwt.sign(option, '666', {//私钥,加盐
        expiresIn: 86400//过期时间,单位是秒
    });
}

jwt验证

同样的这里我们选择的也是同步操作,

1.token:就是之前sign方法生成的token令牌(一串字符串)

  1. secretOrPrivateKey:你自己的私钥

3.options同样是一些配置,这里我们使用不到

这里提醒一下,如果令牌已经过期了然后进行校验则会进行报错所以这里需要进行try,catch包裹

复制代码
const jwtToken = ctx.request.headers.authorization;
const decoded = jwt.verify(jwtToken, '666');
//这里打印一下decoded大家可以看看长啥样
console.log(decoded);

这是我传入进行加密的数据

这是我解密后返回的数据

前端axios的请求拦截

前端在接受到后端传入的token令牌后存入本地,在之后每次请求都需要在请求头带上token令牌。如果每次都需要手动设置无疑非常麻烦,这里我们可以使用axios请求拦截。

它可以在每次发送网络请求之前进行一些配置。

复制代码
axios.interceptors.request.use((request) => {
    
    let jwtToken = localStorage.getItem('token');
    // 如果本地拥有令牌则存放在Authorization中发送给后端
    if (jwtToken) {
        req.headers.Authorization = jwtToken;
    }
    return request;
})

结语

在实际的应用中,Token 通常是在用户成功登录后由服务器生成并返回给客户端。客户端随后会在后续的每个请求中携带 Token,通常放在 HTTP 头部的 Authorization 字段中。服务器接收到请求后,会验证 Token 的有效性,然后根据 Token 提供的信息进行相应的处理。

本次分享就到这啦,喜欢的话就点个关注或者是赞吧!- ̗̀(๑ᵔ⌔ᵔ๑)

相关推荐
不会敲代码11 小时前
手写 Mini React:从 JSX 到虚拟 DOM 再到 render,搞懂 React 底层原理
前端·javascript·react.js
kyriewen2 小时前
你的代码仓库变成“毛线团”了?Monorepo 用 Turborepo 拆成“乐高积木”
前端·javascript·面试
身如柳絮随风扬3 小时前
你知道什么是 Ajax 吗?—— 从入门到原理,一篇彻底搞懂
前端·ajax·okhttp
旷世奇才李先生3 小时前
Vue3\+TypeScript 2026实战——企业级前端项目架构搭建与性能优化全指南
前端·架构·typescript
视觉&物联智能3 小时前
【杂谈】-人工智能风险文化对组织决策的深远影响
人工智能·安全·ai·agi
Beginner x_u4 小时前
前端八股整理(工程化 02)|CommonJS/ESM、Webpack Loader/Plugin 与Vite 对比
前端·webpack·node.js·plugin·loader
openKaka_4 小时前
createRoot 到底创建了什么:FiberRootNode 和 HostRootFiber 的初始化过程
前端·javascript·react.js
习明然4 小时前
UniApp开发体验感受总结
前端·uni-app
cczixun4 小时前
OpenAI连发GPT-5.5系列:免费版幻觉大降,安全版能力飙升,千亿融资估值直冲8520亿美元
人工智能·gpt·安全
刀法如飞5 小时前
Claude Code Skills 推荐:2026年最值得安装的10个AI技能
前端·后端·ai编程