Vue express鉴权零基础入门

作者:星海拾遗 时间:2024-05-13 09:11:29 

讲在前面的话:一个成熟的全栈工程师开发的前后端项目鉴权是必不可少的,接下来我们就用一篇文章来介绍一下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图示一点通

Vue express鉴权零基础入门

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

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: &ldquo;wxs&rdquo; }且有效时间为10s的Token

传递Token

express定义一个接口

app.post("/login", (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

Vue express鉴权零基础入门

验证token

再定义另一个接口

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

postMan编辑如下

Vue express鉴权零基础入门

注意填上token字段

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

隔十秒之后再次发送请求

Vue express鉴权零基础入门

鉴权成功!

来源:https://blog.csdn.net/qq_38280242/article/details/123715264

标签:Vue,express,鉴权
0
投稿

猜你喜欢

  • python实现FTP服务器服务的方法

    2021-01-08 10:07:38
  • 模仿IE自动完成功能

    2010-03-18 15:51:00
  • jsp include文件时的一个乱码解决方法

    2024-03-27 19:34:28
  • Java使用JDBC连接数据库的详细步骤

    2024-01-15 17:42:42
  • 基于Tensorflow的MNIST手写数字识别分类

    2023-12-01 11:35:18
  • python实现将range()函数生成的数字存储在一个列表中

    2021-12-19 08:01:51
  • python如何寻找主串中所有指定子串下标

    2023-11-27 08:38:41
  • 详解Python绘图Turtle库

    2021-11-29 05:42:06
  • Golang Socket Server自定义协议的简单实现方案

    2024-04-25 13:17:40
  • vue 使用vant插件做tabs切换和无限加载功能的实现

    2024-04-10 13:49:34
  • python爬虫之request模块深入讲解

    2021-09-21 00:35:51
  • Python的CGIHTTPServer交互实现详解

    2021-04-19 08:39:09
  • Python 中的range(),以及列表切片方法

    2022-04-22 16:22:53
  • Python 实现王者荣耀中的敏感词过滤示例

    2023-08-14 01:21:04
  • sql使用cast进行数据类型转换示例

    2024-01-14 07:42:11
  • Python实现按中文排序的方法示例

    2023-11-29 15:19:22
  • PHP MySQL的安装与配置详解

    2023-10-26 11:14:55
  • sql2005 HashBytes 加密函数

    2024-01-21 11:28:23
  • php生成随机密码的三种方法小结

    2023-11-22 04:25:50
  • 无缝滚动js代码通俗易懂(自写)

    2023-07-02 05:23:49
  • asp之家 网络编程 m.aspxhome.com