转自:https://blog.csdn.net/weixin_41829196/article/details/80444870

前后端分离,如何防止用户直接在地址栏输入url进入页面,也就是判断用户是否登录,没有,则直接跳转到登录页,后台可以用session记录用户登陆的状态,疑问的是前端每次ajax请求,都要做状态判断么,没登录就location.href="login.html",还是有什么别的写法?请教大神,重点想知道前端是如何写的,求demo, 另外就是单页面应用上,前端又是如何操作的?

answer:

是的,每个 Ajax 都需要对状态进行判断,但这个判断可以由后端来做。
具体的做法是通过 cookie 做的,也就是我们在登录页登录后,由后端返回一个带有 Set-Cookie 的返回头来种 cookie。那么在 cookie 失效前,发 Ajax 请求都是会自动带有这个 cookie 的,这时后端就能进行判断。
一旦这个 cookie 失效,后端在请求返回时应该用某种方式告诉前端,符合 HTTP 规范的做法是返回一个 401 状态码,这个时候前端通过拦截器(如 axios 的 interceptor)进行统一处理,跳转到登录页。
---------------------
作者:HainesFreeman
来源:CSDN
原文:https://blog.csdn.net/weixin_41829196/article/details/80444870
版权声明:本文为博主原创文章,转载请附上博文链接!

前后端分离, 前端如何防止直接输入URL进入页面?的更多相关文章

  1. 前后端分离中,Gulp实现头尾等公共页面的复用

    前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...

  2. 前后端分离中,gulp实现头尾等公共页面的复用 前言

    前言 通常我们所做的一些页面,我们可以从设计图里面看出有一些地方是相同的.例如:头部,底部,侧边栏等等.如果前后端分离时,制作静态页面的同学,对于这些重复的部分只能够通过复制粘贴到新的页面来,如果页面 ...

  3. 基于NodeJS进行前后端分离

    1.什么是前后端分离 传统的SPA模式:所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现. 从某种意义上来说,SPA确实做到了前后端分离,但这种方式存在两个问题 ...

  4. WebAPI 实现前后端分离

    随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. 现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换代越来越快,越来越多. 传统的模式 前 ...

  5. WebAPI 实现前后端分离的示例

    转自:http://www.aspku.com/kaifa/net/298780.html 随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. 现在的前端的框架, ...

  6. 前后端分离时代,Java 程序员的变与不变!

    事情的起因是这样的,有个星球的小伙伴向邀请松哥在知乎上回答一个问题,原题是: 前后端分离的时代,Java后台程序员的技术建议? 松哥认真看了下这个问题,感觉对于初次接触前后端分离的小伙伴来说,可能都会 ...

  7. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  8. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  9. .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

    框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...

随机推荐

  1. python学习-基础知识-1

    1.计算机历史 计算机使用高低电压的两种状态来描述信息.计算机可以理解的只有二进制数据即010100011....,1个比特位可以表示的状态只有2种,n个比特位可以表示的状态有2的n次方种. 所以如果 ...

  2. ios UITableView 异步加载图片并防止错位

    UITableView 重用 UITableViewCell 并异步加载图片时会出现图片错乱的情况 对错位原因不明白的同学请参考我的另外一篇随笔:http://www.cnblogs.com/lesl ...

  3. 案例20-页面使用redis缓存显示类别菜单

    1 准备工作 1  需要导入所需要的jar包. 2 启动windows版本的redis服务端 3 准备JedisUtils工具类的配置文件redis.properties redis.maxIdle= ...

  4. hibernate抓取问题

    当使用xml配置类之间的关系时 ,例如 学生 班级,多对一关系 /** * 默认情况会发出2条SQL语句,一条取student,一条取Classroom,其实这只需要一条sql             ...

  5. 关于Stream的Read方法

    一次做到一个关于使用DataContractJsonSerializer类的表述.其中需要用到MemoryStream数组读取.发生数组溢出错误,这里特记录一笔: public static clas ...

  6. 使用Chrome console提取页面数据

    使用Chrome console提取页面数据 1.需求介绍 在做课题研究的过程中,遇到这样一个问题,有一个页面中包含很多IP地址,需要把这些IP地址提取出来保存到文件中.如下图所示: 一开始的做法是一 ...

  7. 跨域拦截Access-Control-Allow-Origin设置多个origin

    在Extjs和java项目碰到了需要同时处理跨域,外部要访问后台接口的问题 原来的代码是这样,只能设置一个extjs前台需要过滤的跨域请求 package com.xgt.config; import ...

  8. 记一个bug的排查过程---复盘

    公众号做了新需求:菜单的click事件,支持多条客服消息. 上线后,只有一个功能不好使,是点击菜单,预期发一条文本类型的客服消息. 实际操作时,点这个菜单项后,什么也没有发生. elk上看日志,也没有 ...

  9. 将forme表单转换为Json对象

    //将Form 表单转换为Json字符串 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); ...

  10. PDF文件比对工具

    tex/PDF对比工具讨论:https://tex.stackexchange.com/questions/65453/track-changes-in-latex 如果有源文件,直接用latexpa ...