umi如何实现鉴权

2023-11-02

什么是jwt鉴权

JWT(JSON Web Token),本质就是一个字符串书写规范。作用是用来在用户和服务器之间传递安全可靠的信息
在目前前后端分离的开发过程中,使用token鉴权机制用于身份验证是最常见的方案,流程如下:
服务器当验证用户账号和密码正确的时候,给用户颁发一个令牌,这个令牌作为后续用户访问一些接口的凭证后续访问会根据这个令牌判断用户时候有权限进行访问
Token,分成了三部分,头部(Header)、载荷(Payload)、签名(Signature),并以.进行拼接。其中头部和载荷都是以JSON格式存放数据,只是进行了编码

生成token

后端

安装第三方插件

npm i jsonwebtoken

生成token

var jwt = require('jsonwebtoken')

 let user = {
    username: 'admin',
  }
    //生成token
  let token = 'Bearer ' + jwt.sign(user, 'qyk', { expiresIn: '1h' })

在入口文件app.js中进行验证
下载插件

npm i express-jwt

进行请求验证(写在路由上面)

app.use(
  expressJWT.expressjwt({
    secret: "qyk",//跟生成token时的要一致
    algorithms: ["HS256"],
  }).unless({
    path: [ { url: /^\/upload/, methods: ["GET"] } ],//不需要验证的路由接口
  })
);

前端

在umi中给axios添加请求头
新建一个文件 api.js

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'//地址
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    let token = sessionStorage.getItem('token')//获取到后端传过来的token
    config.headers.Authorization = token
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
export default axios

在使用axios的文件引入 api.js

// import axios from '../api.js'
//模拟口段token
// let token = sessionStorage.setItem('token','Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWF0IjoxNjc5MDE3MjE3LCJleHAiOjE2NzkwMjA4MTd9.jRl8Egr7VOmZ68GFHqirjHjuXhVel72KGsO-WMwgydY')
// axios.post('/infosss',{name:'222'}).then(res=>{
//   console.log(res);
// })  
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

umi如何实现鉴权 的相关文章

随机推荐

  • HTML5 页面布局【结合案例】

    新布局的意义 语义化 HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签 1 这种语义化的特性提升了网页的质量和语义 2 减少了以前用于CSS 调用的class 和 id 属性 对搜索引擎的友好 新的结构标签带来的
  • su root 与 su - root的区别

    su root 与 su root的区别 su 默认切到 root su 与su 的区别 su 是不改变当前变量 su 是切换到用户的变量 su只能获得root的执行权限 不能获得环境变量 而su 是切换到root并获得root的环境变量及
  • (Java课设)学生成绩管理系统(IDEA+SSM+Layuimini)

    一 系统介绍 1 开发环境 2 技术概要 3 设计概要 4 功能模块设计 二 系统展示 三 部分代码 Student java studentDao接口文件 StudentService java StudentController jav
  • 如何使用VisualVM进行性能分析本地java项目和远程java项目

    这里是weihubeats 觉得文章不错可以关注公众号小奏技术 文章首发 拒绝营销号 拒绝标题党 背景 在有时候我们需要分析java应用的一些内存 gc等情况进行性能分析 我们往往需要一些性能分析利器 而VisualVM算是其中一个 今天我
  • RTL8189ES/ETV/FTV系列模块定频软件操作手册

    使用说明 1 安装串口驱动 SecureCRT串口工具 2 右键打开我的电脑 选择属性 打开设备管理器 如下图示找到COM口 3 打开串口工具 按下图设置 4 打开机器电源 串口工具中会出现字符运行 停止后按ENTER出现下图 5 输入 号
  • Docker Compose的介绍及安装

    一 compose介绍 Compose是一个用来定义和运行复杂应用的Docker工具 一个使用Docker容器的应用 通常由多个容器组成 使用Docker Compose不再需要使用shell脚本来启动容器 Compose 通过一个配置文件
  • DIY简单的RTOS(二)任务切换

    从系统的角度看 任务是竞争系统资源的最小运行单元 任务可以使用或等待CPU 使用内存空间等系统资源 并独立于其它任务运行 项目地址 任务控制块 在其他RTOS中 任务一般是由 任务堆栈 任务控制块和任务函数三部分组成 任务堆栈 上下文切换的
  • 计算机技术为我们带来的影响,计算机技术对社会发展的影响探析

    摘 要 随着社会科学技术和经济的迅速发展 计算机技术也越来越完善 对人类生活的影响也越来越显著 计算机的应用领域很大 几乎可以被用在人们生活的方方面面 无论是学习 工作 还是生活 娱乐 都能看到计算机技术为我们提供的方便之处 正是因为计算机
  • 【论文笔记】BLIP: Bootstrapping Language-Image Pre-training forUnified Vision-Language Understanding and

    1 背景 1 1 之前存在的两个问题 1 模型视角 大多数方法要么采用基于编码器的模型 要么采用编码器 解码器模型 基于编码器的模型不太容易直接转移到文本生成任务 例如 图像字幕 而编码器 解码器模型尚未成功用于图像文本检索任务 2 数据集
  • GoShoppingActivityLearnBinding.java:918: 错误: 参数过多 protected GoShoppingActivityLearnBinding

    前些天发现了一个蛮有意思的人工智能学习网站 8个字形容一下 通俗易懂 风趣幽默 感觉非常有意思 忍不住分享一下给大家 点击跳转到教程 工作中遇到的问题 使用DataBinding 报参数过多 编译失败 异常截图如下 问题解决方法 探索 当时
  • Camera SPI协议讲解

    Camera SPI协议讲解 该文章写于2016年 一直未发表 近期工作中又涉及到了Camera相关的内容 重新温习了下相关知识 决定把这篇文章发表出来 大家共同学习 SPI Serial Peripheral Interface 串行外围
  • ‘cmake' 不是内部或外部命令 也不是可运行的程序 或批处理文

    在 Win7下的命令行模式下 输入cmake相关命令 出现如下错误 cmake 不是内部或外部命令 也不是可运行的程序 或批处理文件 解决方法 在环境变量中添加cmake的文件路径 计算机 右键 属性 高级系统设置 高级 环境变量 系统变量
  • pytorch 多GPU训练总结(DataParallel的使用)

    参考 主页 PyTorch中文文档 前言 博主最近搭建网络的时候 需要调用不同的GPU 实现训练的加速 有时间会出现显卡现存分布不均的情况 有时间有的显卡温度特别高 博客持续更新 一更 2022 09 01 DP模式见本文 使用最少的代码实
  • Go语言上手-实战案例(1)

    猜谜游戏 在这个游戏里面 程序首先会生成一个介于1 100之间的随机整数 然后提示玩家进行猜测 玩家每次输入一个数字 程序就会告诉玩家这个猜测的值是高于还是低于那个秘密的随机数 并且让玩家再次猜测 如果猜对了就告诉玩家胜利并且退出程序 生成
  • 搜索神器Everything的功能技巧(非NTFS文件搜索,FTP/HTTP服务)

    Everything这个搜索神器估计大家都听过 磁盘上的任何文件只要输入后基本就是秒搜 但Everything除了搜索 还自带了一些好用的功能 1 添加非NTFS格式的驱动器索引 默认Everything只会索引查询本地的NTFS格式磁盘
  • Linux云计算命令大全

    云计算命令总结 一 系统命令精讲 二 目录和文件管理 三 安装及管理程序 四 账号管理 五 权限及归属管理 六 磁盘管理 七 文件系统与LVM 八 服务器RAID及配置实战 九 引导过程与服务控制 十 进程和计划任务管理 十一 系统安全及应
  • 【linux】nginx: [emerg] the “ssl“ parameter requires ngx_http_ssl_module

    1 概述 我使用 Linux centos8 安装nginx详细步骤 这个安装了一个nginx 然后启动如下 root zdh2 nginx 1 18 0 sudo usr local nginx sbin nginx c usr
  • class与prototype

    创建实例对象 ES5中常用的构造函数模式 function Person name this name name this getName function return this name ES6 通过class定义类 class Per
  • selenium处理登陆爬虫(维持登陆状态请求页面)

    selenium在处理需要登陆的时候 需要修改浏览器请求头参数cookie或token 在请求需要登陆的页面时 添加参数 跳过登陆 直接获取登陆后的内容 直接在driver对象内添加cookie参数绕开登陆 处理思路 浏览器先登陆 请求同一
  • umi如何实现鉴权

    什么是jwt鉴权 JWT JSON Web Token 本质就是一个字符串书写规范 作用是用来在用户和服务器之间传递安全可靠的信息 在目前前后端分离的开发过程中 使用token鉴权机制用于身份验证是最常见的方案 流程如下 服务器当验证用户账