const jwt = ref(localStorage.getItem('jwt'))

时间: 2023-07-09 09:05:17 浏览: 171

Node.js Koa2使用JWT进行鉴权的方法示例

前言在前后端分离的开发中，通过 Restful API 进行数据交互时，如果没有对 API 进行保护，那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢？ Json Web Token 简称为 JWT，它定义了一种用于简洁、自包含的用于通信双方之间以 JSON 对象的形式安全传递信息的方法。JWT 可以使用 HMAC 算法或者是 RSA 的公钥密钥对进行签名。说得好像跟真的一样，那么到底要怎么进行认证呢？首先用户登录时，输入用户名和密码后请求服务器登录接口，服务器验证用户名密码正确后，生成token并返回给前端，前端存储token，并在后面的请求中把在前后端分离的开发模式下，Restful API的保护至关重要，因为它们直接处理敏感数据和业务逻辑。Json Web Token（JWT）提供了一种安全的鉴权机制，可以在客户端和服务端之间传递认证信息，而无需存储会话状态。本文将详细介绍在Node.js Koa2框架下如何使用JWT进行鉴权。 JWT的原理是：当用户成功登录后，服务器会生成一个JWT，其中包含了用户的标识（如用户名、ID等）以及其他必要的信息，然后将这个JWT返回给前端。前端收到JWT后将其存储在本地（例如使用localStorage），并在后续的所有需要鉴权的API请求中将其作为令牌发送给服务器。服务器接收到JWT后，会进行解码验证，确认其有效性，如果有效则允许访问资源，否则拒绝请求。在Koa2中，我们可以使用`jsonwebtoken`库来生成和验证JWT，同时配合`koa-jwt`中间件简化操作。以下是一个使用示例： 1. 首先安装所需依赖： ```bash npm install jsonwebtoken koa-jwt ``` 2. 创建JWT：在Koa2的路由中，创建一个登录接口，当用户输入正确的用户名和密码后，生成JWT。下面是一个简单的例子： ```javascript const Koa = require('koa'); const Router = require('koa-router'); const jwt = require('jsonwebtoken'); const userModel = require('./models/userModel'); const router = new Router(); router.post('/login', async (ctx) => { const data = ctx.request.body; if (!data.name || !data.password) { return ctx.body = { code: '000002', data: null, msg: '参数不合法' }; } const user = await userModel.findOne({ name: data.name, password: data.password }); if (user) { const token = jwt.sign({ name: user.name, _id: user._id }, 'my_secret_key', { expiresIn: '2h' }); return ctx.body = { code: '000001', data: token, msg: '登录成功' }; } else { return ctx.body = { code: '000002', data: null, msg: '用户名或密码错误' }; } }); module.exports = router; ``` 上述代码中，`jwt.sign()`用于生成JWT，`my_secret_key`是用于签名的密钥，`expiresIn: '2h'`表示JWT的有效期为2小时。 3. 前端获取和存储JWT：在Vue.js应用中，当用户登录成功后，将JWT存储到localStorage中，并记录当前时间以检测JWT是否过期： ```javascript submit() { axios.post('/login', { name: this.username, password: this.password }) .then(res => { if (res.data.code === '000001') { localStorage.setItem('token', res.data.data); localStorage.setItem('token_exp', new Date().getTime() + 7200000); // 过期时间加到当前时间 this.$router.push('/'); } else { alert(res.data.msg); } }); } ``` 4. 请求时携带JWT：使用axios的请求拦截器，确保每个需要鉴权的API请求都在headers中添加JWT： ```javascript axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); ``` 5. 验证JWT：在Koa2服务端，使用`koa-jwt`中间件对请求进行验证。未通过验证的请求会被自动拒绝： ```javascript const jwtMiddleware = require('koa-jwt'); const secret = 'my_secret_key'; const app = new Koa(); const router = require('./routes/loginRouter'); // 导入上面创建的登录路由 // 添加JWT验证中间件，所有经过此中间件的请求都需要JWT const protectedRoutes = router.routes(); app.use(jwtMiddleware({ secret }).unless({ path: ['/login'] })); // 免除登录接口的JWT验证 app.use(protectedRoutes); app.listen(3000); ``` 通过以上步骤，我们已经在Node.js Koa2环境中实现了JWT鉴权。这种鉴权方式具有无状态、安全高效的特点，适合于前后端分离的项目。但是需要注意，虽然JWT自身包含有效期，但仍然需要在服务器端存储用户信息以便在JWT丢失或被篡改时进行撤销。此外，对于敏感操作，如修改密码或删除账号，应强制用户重新登录以获取新的JWT。

这段代码使用了 Vue.js 3.x 中的 `ref` 函数，用于创建一个响应式的数据对象。`localStorage.getItem('jwt')` 用于获取浏览器本地存储中的 JWT（JSON Web Token），并将其作为初始值传递给 `ref` 函数。最终得到的 `jwt` 对象可以在模板中直接使用，并且当浏览器本地存储中的 JWT 值发生变化时，`jwt` 对象也会自动更新。请注意，由于 `localStorage` 存储的数据类型是字符串，因此需要使用 `JSON.parse()` 函数将其转换为 JavaScript 对象，例如： ``` const jwt = ref(JSON.parse(localStorage.getItem('jwt'))) ```

阅读全文

const jwt = ref(localStorage.getItem('jwt'))

相关推荐

Vue.js中二次封装localStorage的实践技巧

Angular JWT认证实战教程与示例

我使用 localStorage.setItem('token', jwt);，来存放jwt令牌，怎么在前端用代码实现每次请求，请求头冲都带上jwt令牌,整体的代码和请求要怎么写，分别放在那些文件里

laravel-nuxtjs-authentication:使用Laravel JWT包进行Laravel和Nuxt.js身份验证

jwt-auth：使用jwt进行节点身份验证

angular-8-jwt-authentication-example：Angular 8 JWT认证示例

angular-9-jwt-authentication-example:Angular 9 JWT身份验证示例

angular-7-jwt-authentication-example:Angular 7 JWT身份验证示例

Node.js Koa2使用JWT进行鉴权的方法示例

react-hooks-jwt-auth：使用React Router，Axios，Bootstrap的React Hooks JWT Auth：基于令牌的身份验证和授权

react-redux-hooks-jwt-auth:React Redux 登录、注销、使用 Hooks 的注册示例、JWT、本地存储、React 路由器、Thunk 中间件、Axios、Bootstrap

JWT认证实战：django.contrib.auth无状态认证解决方案

基于JWT的接口鉴权实现

如何在浏览器环境中使用了localStorage来存储JWT

vue3 jwt 认证

axios如何携带jwt令牌

nodejs获取浏览器local jwt

最新推荐

Windows平台下的Fastboot工具使用指南

管理建模和仿真的文件

DLMS规约深度剖析：从基础到电力通信标准的全面掌握

修改代码，使其正确运行

Python机器学习基础入门与项目实践

"互动学习：行动中的多样性与论文攻读经历"

【Shell脚本进阶】：wc命令行数统计的高级用法及解决方案

python编写一个程序，使得根据输入的起点和终点坐标值计算出坐标方位角

Achilles-2 原始压缩包内容解密

关系数据表示学习