首页 > 其他分享 >前后端分离项目,后期前端身份验证的麻烦

前后端分离项目,后期前端身份验证的麻烦

时间:2024-08-08 13:28:41浏览次数:11  
标签:redirect 前端 身份验证 token cookie 麻烦 页面

软件构成

  • 后端
    后端是一个asp.netcore webapi项目,使用jwt进行身份验证和鉴权。
  • 前端
    前端是一个基于http协议的asp.netcore RezorPage项目,但实际上完全使用的wwwwroot目录下的静态文件。没有使用RazorPage

目前只有后端接口鉴权,前端页面任意访问

身份验证需求

这两天安全要求下来了,要求给前端页面加上身份验证。只开放login登录页面redirect第三方系统跳转此系统页面。初始办法是后端登录生成token后,放到redis中。

  • login.html
    访问前端login登录页面,点击登录后,后端接口返回token,login页面将token放在本地cookie中。之后打开新页面时都会带上这个cookie。前端中间件中取出cookie中的token,和redis中的token比较。如果一致,则放行到下一个中间件。如果不一致,则重定向到login录页面,并短路请求处理管道。

image

  • redirect.html
    对于redirect第三方系统跳转此系统页面,则是在url中传入了一个token,前端项目验证token有效性之后放入到redis中。同时redirect页面也把这个token放入本地cookie。之后新标签页都会带上这个cookie。在前端项目的中间件中进行验证。

image

问题

对于在新标签页打开页面的形式,这种身份验证方式运行良好,没有任何问题。

但是使用cookie进行身份验证有一个问题。就是iframe框架限制了跨域的cookie提交。当redirect被嵌入其它系统时,首先,这个本地cookie被禁止写入。其次,cookie不会被放到请求中,因此一直往登录页面跳转。

我之后试了下会话cookie,也就是session。但是被查看响应信息,提示会话cookie同样被浏览器禁止写入。这下子就麻烦了,好多其它系统页面都使用了iframe嵌入这个项目的页面。如果加上前端身份验证的话,那些地方的iframe都会跳转到登录页面。

是否只有https才能在iframe中携带cookie,解决这个跨域问题?

标签:redirect,前端,身份验证,token,cookie,麻烦,页面
From: https://www.cnblogs.com/ggtc/p/18348521

相关文章

  • 前端使用 Konva 实现可视化设计器(20)- 性能优化、UI 美化
    这一章主要分享一下使用Konva遇到的性能优化问题,并且介绍一下UI美化的思路。至少有2位小伙伴积极反馈,发现本示例有明显的性能问题,一是内存溢出问题,二是卡顿的问题,在这里感谢大家的提醒。请大家动动小手,给我一个免费的Star吧~大家如果发现了Bug,欢迎来提Issue哟~g......
  • git前端上传项目忽略本地node_modules文件
    要在Git上传前端代码时忽略node_modules文件夹在项目根目录下查找或创建.gitignore文件:如果你的项目中已经存在.gitignore文件,则打开它进行编辑。如果不存在,就在项目根目录下创建一个新的.gitignore文件。在.gitignore文件中添加node_modules/:打开.gitignore文件,并添加......
  • 微前端
    一、如何判定公司项目是否需要微前端?其实如何判定公司项目是否需求使用微前端,也很简单,主要查看一点项目是不是一个巨石应用,如何去定义一个巨石应用,我们从下面几方面可以定义;部署频繁:每一次细微的修改都需要整个部署应用;部署时间长:每次部署的时间渐渐进入10min的行列;加载缓......
  • 开源免费前端地图开发组件xdh-map
    xdh-map是一个基于Openlayers的地图应用Vue组件,具有多方面的功能和特点。以下是对xdh-map的详细介绍:一、功能与特性内置多种地图瓦片:xdh-map内置了百度、高德、天地图等地图瓦片,使得开发者可以方便地在应用中集成多种地图源。支持PGIS厂商对接:它还支持与方正、超图、山海经纬......
  • 前端联调budget
    测试环境一直报错{"id":"grpc.client","code":14,"detail":"message:connectionerror:desc=\"transport:Errorwhiledialingdialtcp172.21.0.2:34083:i/otimeout\",callee_addr:172.21.0.2:34083","s......
  • Electron + Vue+Node.js 搭建前端桌面应用
    一、在使用Electron之前我们要了解Electron是什么?Electron官网地址点此: electron官方地址Electron相当于一个浏览器的外壳,我们将编写的HTML,CSS,Javascript网页程序嵌入进Electron里面以便于在桌面上进行运行。通俗来讲它就是一个软件,如QQ、网易......
  • 前端实现文档预览(支持word、ppt、pdf)-【@zuiyouliao/vue-file-viewer】
    背景有的时候我们需要在前端页面上预览某些文档,文档的格式比如:word、ppt、pdf、图片等等实现方案可以使用@zuiyouliao/vue-file-viewer第三方库,官方地址方式1:通过组件方式引入优点:word/图片可以识别,方便快捷。缺点:pdf/pptx文件无法识别。安装依赖npminstall--save@zui......
  • 前端HBuilderX HTML5模版,打包成dist 部署
    首先需要修改utils中appConfig.js的ip+路径+域名,使用服务器部署,那么就用服务器的ip,prod-api可以自定义,根据自己的需求起别名找打HBuilderX最上方发行,然后点击找到自己需要的发版,我使用的是网站-PC手机H5找到manifest.json,如果没有域名,点击重新获取即可将获取到的域名......
  • Nginx反向代理,代理H5前端 ,java后端,使用服务器+finalshell+vpn
    使用前确认已经安装好nginx,这里我使用的是普通的nginx,注意不是Docker版本的nginx输入nginx-t查询一下,自己的nginxconfig.nginx在那个包下,方便查询 使用catnginx.conf命令,进入需要配置的conf中(这个是我使用的server[server{listen82;s......
  • 前端导入导出文件(前后端不分离)
      有时候在对硬件传送过来的数据进行处理后,需要将这些数据显示在折线图上,从而来观察这些数据是怎样变化的,这个好办,但有时候又要求需要将折线图上面显示的数据全部导出到一个文件中,并且有时候又要求在文件中改变数据后,再将文件中的数据重新导入到折线图中,哪有该如何写呢? ......