1. 首先用户需要进行登陆(请求登陆接口),接口请求成功之后后台会返回对应的用户信息(可以把用户信息存放在浏览器缓存中),并且后台会设置浏览器的cookie值(可以在network->header->Response Headers里的Set-Cookie看见),如下图:

  2. 用户登陆之后的每个请求,浏览器都会自己带上cookie,用于用户验证

  3.vue中每次路由跳转都会获取之前存在缓存里面的用户信息,如果能获取到,则继续下面的操作;如果获取不到,用户需要向后台重新请求下接口(这个接口是理论上是不需要任何请求体的,并且直接会返回用户信息),通过请求结果进行后续操作,接口请求成功之后会有两种结果:

    • 返回正常的用户信息,我们只需要更新下缓存里面的用户信息即可
    • 如果获取不到用户信息(请求成功,但是没有用户信息),则说明服务器的session过期,这时候需要跳转到登陆界面,让用户重新登陆

  4. 还有一种情况:用户没有进行路由跳转,直接在当前页进行接口请求,这时候如果服务器的session过期,后台会返回特定的提示信息(可能是某个特定的状态码,具体由后台设定),这时候也是需要跳转到登陆界面的

前端验证用户登陆状态(vue.js)的更多相关文章

  1. IOS开发之记录用户登陆状态

    上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreData还是蛮好用的.今天要说的是如何记录我们用户的登 ...

  2. IOS开发之记录用户登陆状态,ios开发用户登陆

    IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreDa ...

  3. 用户登陆状态,ios开发用户登陆

    IOS开发之记录用户登陆状态,ios开发用户登陆 上一篇博客中提到了用CoreData来进行数据的持久 化,CoreData的配置和使用步骤还是挺复杂的.但熟悉CoreData的使用流程后,CoreD ...

  4. .Net core 使用特性Attribute验证Session登陆状态

    1.新建一个.net core mvc项目 2.在Models文件夹下面添加一个类MyAttribute,专门用来保存我们定义的特性 在这里我只写了CheckLoginAttribute用来验证登陆情 ...

  5. Asp.Net使用加密cookie代替session验证用户登录状态 源码分享

    首先 session 和 cache 拥有各自的优势而存在.  他们的优劣就不在这里讨论了. 本实例仅存储用户id于用户名,对于多级权限的架构,可以自行修改增加权限字段   本实例采用vs2010编写 ...

  6. django 使用装饰器验证用户登陆

    使用装饰器验证用户登陆,需要使用@method_decorator 首先需引用,method_decorator,并定义一个闭包 from django.utils.decorators import ...

  7. web前端开发面试题(Vue.js)

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?  ...

  8. div双击全屏,再双击恢复到原来的状态vue,js来做

    需求是这样的: 有四个视频,视频是在4个区域,点击之后就全屏 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. linux下在root用户登陆状态下,以指定用户运行脚本程序实现方式

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAABKCAIAAACASdeXAAAEoUlEQVR4nO2dy7WlIBBFTYIoSIIkmD ...

随机推荐

  1. 显示界面的流畅性FHHFPSIndicator

    github地址https://github.com/jvjishou/FHHFPSIndicator 1.使用cocoapods  pod 'FHHFPSIndicator' 使用方法: 然后在Ap ...

  2. MyEclipse10.0 注册破解步骤

    MyEclipse 10.0破解 激活(java编写,适用于装有java环境的各种操作系统,Windows,Linux,MacOS) =====[方法一]=====[第一步]:输入任意用户名[第二步] ...

  3. SQLCE数据工具(Flyhoward Ltd SDF Viewer)

    SDF Viewer sdf数据库创建编辑查看 官方下载地址  http://www.flyhoward.com/Download_SDF_Viewer.aspx 用户名:www.cr173.com注 ...

  4. Win10+vs2012+cuda8.0的安装与配置

    安装环境说明:NVDIA GeForce 930M.Intel(R) HD Graphics 520 显卡和cuda需要兼容匹配,我一开始下载的cuda6.5无法安装,所以又重新下了比较新的cuda8 ...

  5. hdu1505City Game(扫描线)

    http://acm.hdu.edu.cn/showproblem.php?pid=1505 题意:R为被占位置,F为空位,求出最大子空矩阵大小*3. 思路:1.悬线法,记录每个位置的悬线能到达的左边 ...

  6. AngularJs 1.x和AngularJs2的区别

    AngularJS  2 尽管还在Alpha阶段,但主要功能和文档已经发布.让我我们了解下Angular 1 和 2 的区别,以及新的设计目标将如何实现. 1.从移动app开发上面分析: Angula ...

  7. [LeetCode] 225. Implement Stack using Queues_Easy tag: Design

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  8. Javascript-短路 与(&&)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. <转>ORACLE EBS中查看某个Request的Output File

    由于某些权限的限制,有时候哪怕System Administrator职责也只能看到某个Request信息,但是不能查看它的Output File(在“Requests Summary”窗口中“Vie ...

  10. cmd中mysql中文乱码问题

    以下为自己亲试: 解决cmd中MySQL查询和命令返回的中文乱码问题 1.修改cmd字符集方法 rem 切换到UTF-8 chcp 65001 rem 切换到默认的GBK chcp 936 rem 美 ...