Vue express鉴权零基础入门

目录token图示一点通express鉴权下载加密/解密包加密基本使用（生成token）传递Token查看token验证token讲在前面的话：一个成熟的全栈工程师开发的前后端项目鉴权是必不可少的，接...

目录

token图示一点通
express鉴权
下载加密/解密包
加密基本使用（生成token）
传递Token
查看token
验证token

讲在前面的话：一个成熟的全栈工程师开发的前后端项目鉴权是必不可少的，接下来我们就用一篇文章来介绍一下express鉴权之路。

本文主要目的是介绍鉴权，那么默认读者已经配置完成了express的跨域基本配置以及options请求处理以及post请求参数接收 如果没有配置也没有关系，试一下我封装的包，不好用你找我麻烦

    npm i wxs-express-config

const wxsExpressConfig = require("wxs-express-config");
// 返回一个经过wxs封装之后的app
const app = wxsExpressConfig();

这个app就是经过我封装后的express app，但是默认设置了全局跨域和接受post请求参数等配置。如果不想全局跨域可以这样配置

// 返回一个经过wxs封装之后的app
const app = wxsExpressConfig({ CROSURL: "http://localhost:3000" });

token图示一点通

看这个示意图就知道校验过程是很简单的，实际操作起来更加简单。

express鉴权

下载加密/解密包

在express中鉴权需要用到一个玩意儿，为了避免出错，这里指定一下版本

    // jsonwebtoken 加密用的 express-jwt是解密用的
    npm i jsonwebtoken@8.5.1 

加密基本使用（生成token）

第一步毫无疑问的是引入

const jwt = require("jsonwebtoken");

使用jsonwebtoken生成token就只有一行代码

jwt.sign('需要加密的信息', '自定义的加密密钥', '额外的配置信息，一般是Token过期时间'),

举个

jwt.sign({<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> username: "wxs" }, '巴啦啦小魔仙随地大小变', {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E--> expiresIn: "10s" }),

这里就生成了一个用巴啦啦小魔仙随地大小变密钥加密{ username: “wxs” }且有效时间为10s的Token

传递Token

express定义一个接口

app.post("/javascriptlogin", (req, res) => {
  res.send({
    code: 0,
    message: "登录成功",
    token: jwt.sign({ username: "wxs" }, secretKey, { expiresIn: "10s" }),
  });
});
app.listen(3001, () => {
  console.log("your localServer is running on http://localhost:3001");
});

查看token

使用postman

验证token

再定义另一个接口

app.get("/getUserInfo", (req, res) => {
  try {
    jwt.verify(req.query.token, secretKey);
    res.send("一个get请求想获取用户信息");
  } catch (err) {
    res.send("过期了，请重新登录");
  }
});

postMan编辑如下

注意填上token字段

最后就可以随心所欲的想在那个接口验证就在那个接口验证（还是建议写个全局中间件统一验证）

隔十秒之后再次发送请求

鉴权成功!

到此这篇关于vue express鉴权零基础入门的文章就介绍到这了,更多相关Vue express鉴权内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！