前端必备token令牌的使用

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

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

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

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

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

初始代码

前端

    
    
    
    


    
token
    
    
    登录,获取token
​
    没有token,不能访问
    删除token
​
    
    

后端代码

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字符串。

基本步骤

1. 在项目中下载安装 npm i jsonwebtoken

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

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

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

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

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

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

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

参考代码

const express = require('express')
const multer = require('multer')
const cors = require('cors')
const app = express();
app.use(cors({origin:true,credentials:true}))
const jwt = require('jsonwebtoken');
app.use(express.urlencoded())
​
app.post('/login',(req,res)=>{
    console.log('接收到的数据是', req.body)
    const {name, password} = req.body
    if(password === '123456') {
        // 调用生成 token 的方法
        const tokenStr = jwt.sign({name: name }, 'heima61', { expiresIn: 5 });
        const token = 'Bearer ' + tokenStr
        res.json({msg:'登录成功', token})
    } else {
        res.json({msg:'登录失败'})
    }
})
​
app.get('/test',(req,res) => {
    res.json({msg: '测试tokenOk'})
})
​
app.listen(3000, ()=>{
    console.log(3000);
})

浏览器端：

保存在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 字段了，并且会自动完成：

• 如果没有问题

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

  2. next()。

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

 

---