前端必备token令牌的使用_阿文666_前端使用token

irpas 02-07 3861

token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。

JWT（json web token）的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户，就像下面这样。

{ "姓名": "张三", "角色": "管理员", "到期时间": "2021年10月11日0点0分" }

以后，用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。

当然，为了防止用户篡改数据，服务器在生成这个对象的时候，会给他加密一下，就是我们看到的一个长长的字符串

初始代码

前端

<!DOCTYPE html> <html lang="en"> <head> ? ?<meta charset="UTF-8"> ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ?<meta http-equiv="X-UA-Compatible" content="ie=edge"> ? ?<title>Document</title> </head> <body> ? ?<h1>token</h1> ? ?<input type="text" id="username" name="name" value="admin"/> ? ?<input type="text" id="password" name="password" value="123456"/> ? ?<button id="btn_login">登录,获取token</button> ? ? ?<button id="btn_testToken">没有token,不能访问</button> ? ?<button id="btn_delToken">删除token</button> ? ? ?<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ? ?<script> ? ? ? ? ? ? ? ?$('#btn_delToken').click(function(){ ? ? ? }) ? ? ? $('#btn_testToken').click(function(){ ? ? ? ? ?$.ajax({ ? ? ? ? ? ? ? type:'get', ? ? ? ? ? ? ? url:'http://localhost:3000/test', ? ? ? ? ? ? ? success(res){ ? ? ? ? ? ? ? ? ? console.log(res); ? ? ? ? ? ? ? } ? ? ? ? ? }) ? ? ? }) ? ? ? ? $('#btn_login').click(function(){ ? ? ? ? ?$.ajax({ ? ? ? ? ? ? ? type:'post', ? ? ? ? ? ? ? url:'http://localhost:3000/login', ? ? ? ? ? ? ? data:{name:$('#username').val(),password:$('#password').val()}, ? ? ? ? ? ? ? success(res){ ? ? ? ? ? ? ? ? ? console.log(res); ? ? ? ? ? ? ? } ? ? ? ? ? }) ? ? ? }) ? ? ? ? ?</script> </body> </html>

后端代码

const express = require('express') const cors = require('cors') const app = express(); app.use(cors({origin:true,credentials:true})) ? app.use(express.urlencoded()) ? app.post('/login',(req,res)=>{ ? ?console.log('接收到的数据是', req.body) ? ?const {name, password} = req.body ? ?if(password === '123456') { ? ? ? ?res.json({msg:'登录成功'}) ? } else { ? ? ? ?res.json({msg:'登录失败'}) ? } }) ? app.get('/test',(req,res) => { ? ?res.json({msg: '测试tokenOk'}) }) ? app.listen(3000, ()=>{ ? ?console.log(3000); }) 服务器端：登录成功创建token

使用第三方模块 jsonwebtoken 创建token字符串。

基本步骤

在项目中下载安装 npm i jsonwebtoken

加载模块 const jwt = require('jsonwebtoken');

在用户登陆成功之后，调用 jwt.sign() 方法创建token，它有如下4个参数：

参数1：必填，对象形式；希望在token中保存的数据

参数2：必填，字符串形式；加密的钥匙；后续验证token的时候，还需要使用

参数3：可选，对象形式；配置项，比如可以配置token的有效期

参数4：可选，函数形式；生成token之后的回调

生成的token前面，必须拼接 Bearer 这个字符串。

参考代码

保存在localStorage

$('#btn_login').click(function(){ ?$.ajax({ ? ?type:'post', ? ?url:'http://localhost:3000/login', ? ?data:{name:$('#username').val(),password:$('#password').val()}, ? ?success(res){ ? ? ?console.log(res); + ? ? ?localStorage.setItem('token', res.token) ? } }) }) 浏览器端：发请求时手动携带token

必须放置在Authorization中

$('#btn_testToken').click(function(){ ?$.ajax({ ? ?type:'get', ? ?url:'http://localhost:3000/test', ? ?headers: { + ? ? ?Authorization: localStorage.getItem('token'), ? }, ? ?success(res){ ? ? ?console.log(res); ? } }) }) 服务器端：实现token认证

选择使用 express-jwt 第三方模块进行身份认证。从模块名可以看出，该模块是专门配合express使用的。

下载安装

npm i express-jwt

中间件技术-验证token

const expressJwt = require('express-jwt'); // app.use(jwt().unless()); // jwt() 用于解析token，并将 token 中保存的数据赋值给 req.user // unless() 约定某个接口不需要身份认证 app.use(expressJwt({ ?secret: 'heima61', // 生成token时的钥匙，必须统一 ?algorithms: ['HS256'] // 必填，加密算法，无需了解 }).unless({ ?path: ['/login'] // 除了个接口，其他都需要认证 }));

上述代码完成后，当一个接口请求到了服务器后，它会自动验证请求头中的 Authorization 字段了，并且会自动完成：

如果没有问题

将token中保存的数据赋值给 req.user

next()。

如果有问题，则抛出错误 next(错误信息)。