文档章节

单页应用 - Token 验证

王福林
 王福林
发布于 2017/04/27 10:11
字数 1351
阅读 66
收藏 2
点赞 0
评论 0

Token的工作原理

 

Token工作原理

 

1. 登录时候,客户端通过用户名与密码请求登录
2. 服务端收到请求区验证用户名与密码
3. 验证通过,服务端会签发一个Token,再把这个Token发给客户端.
4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们是存在SessionStorage
5. 客户端每次像服务器请求API接口时候,都要带上Token.
6. 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息.

这里还涉及到一些前端登录拦截(路由拦截,拦截器).

  • 路由拦截
// 登录路由设置个字段,用来记录是否已经登录
path: '/login', name:'login',
    component: resolve => require(['./login.vue'], resolve),
    meta: { noCheckSession: true }
// 路由拦截
router.beforeEach((to, from, next) => {
  if(to.matched.some(record => !record.meta.noCheckSession)) {
    let isLogin = auth.checkAuth() //我们登录成功后会设置个字段(authenticated)为true.这里就是获取那个字段.
    if(!isLogin){
      console.error('Place login!')
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 跳转到登录页面
      })
    }else{
      next()
    }
  }else{
    next()
  }
  }
  • 拦截器
export const interceptor = function(Vue){
  Vue.http.interceptors.push((request, next)=>{
    let tokenVal = sessionStorage.getItem("token"); // 取出Tolen
    if(tokenVal) {
      request.headers['token'] = tokenVal  // 存在的话,把Token放在请求头中
    }

    next((response)=>{
      let status = response.status
      let data = response.data
      try{
        if(typeof data === 'string'){
          data = JSON.parse(data)
        }
      }catch(e){

      }
      let isError = false
      let duration = 0
      let options = {
        message: ""
      }
      if(status === 401 ) {
        location.href = '/login'  // 401未授权,重新登录
      }else if (status === 500){
        isError = true
        options.message = response.statusText
        options.description = response.data
        Message.error(options) // 调用全局组件提示
          location.href = '/login'
      }else if (status === 200){
        // custom error
        if (response.data['<isError>']){
          ...
        }
        //timeout
        else if(data.data && data.data['ecode'] === "401"){
          ....
        }
      }
    });
  });
}

关于Token,你需要知道的十件事.

  • Token 应该被保存起来,放到 local / session stograge 或者 cookies.

      1. 在单页应用程序中,有些用户刷新浏览器后会带来一些跟 token 相关的问题。而解决方法很简单:你应该把 token 保存到起来:放到 session storage, local storage 或者是客户端的 cookie 里。而浏览器不支持 session storage 时都应该转存到 Cookies 里。
      2. 存放在Cookie里面,只是把 Cookie 当作一个储存机制,而不是一种验证机制,这个 cookie 不会被 Web 框架用于用户验证,所以没有 XSRF 攻击的危险。
  • Tokens像 cookie 一样有有效期,你可以有更多的操作方法
// Cookie的有效期操作

1. cookies 可以在浏览器关闭后删除(session cookies);
2. 通过绝对有效期或弹性有效期(sliding window expiration);
3. Cookies 可以通过携带有有效期地保存起来。
//一旦 token 过期,只需要重新获取一个。我们一般定义个可以接口去刷新 token


 1. 让旧的 token 失效;
 2. 检查这个用户是不是还存在,权限是否被取消或者任何对你的程序来说是有必要的;
 3. 得到一个更新了有效期的 token。
  • Local / session storage 不会跨域工作,请使用一个标记 cookie

      1. sessionStorage 不能跨页面共享的,关闭窗口即被清除,
      2. localStorage 可以同域共享,并且是持久化存储的
      3. 在 local / session storage 的 tokens,就不能从不同的域名中读取,甚至是子域名也不行.
      解决办法使用Cookie.demo: 假设当用户通过 app.yourdomain.com 上面的验证时你生成一个 token 并且作为一个 cookie 保存到 .yourdomain.com,然后,在 youromdain.com 中你可以检查这个 cookie 是不是已经存在了,并且如果存在的话就转到 app.youromdain.com去。这个 token 将会对程序的子域名以及之后通常的流程都有效(直到这个 token 超过有效期)
      只是利用cookie的特性进行存储而非验证.
  • 每个 CORS(跨域资源共享)请求都会带上预请求(Preflight request)

  • 当你需要流传送某些东西,请用 token 去获取一个已签名的请求。

  • XSS 比 XSRF 要更容易防范
XSS 攻击的原理是,攻击者插入一段可执行的 JavaScripts 脚本,该脚本会读出用户浏览器的 cookies 并将它传输给攻击者,攻击者得到用户的 Cookies 后,即可冒充用户。
但是要防范 XSS 也很简单,在写入 cookies 时,将 HttpOnly 设置为 true,客户端 JavaScripts 就无法读取该 cookies 的值,就可以有效防范 XSS 攻击。
因为 Tokens 也是储存在本地的 session storage 或者是客户端的 cookies 中,也是会受到 XSS 攻击。所以在使用 tokens 的时候,必须要考虑过期机制,不然攻击者就可以永久持有受害用户帐号。
  • 注意 token 的大小

      1. Token 机制在每次请求 API 的时候,都需要带上一个 Authorization 的 Http Header 。
      2. Token 的大小其实由你储存在 token 中的信息量所决定,例如可能有 nickname,openid 等开发者另外加上的信息。
      3. Token 中只保留关键的几条身份标识信息,其余都放到数据库里面了,权限控制的时候再捞出。这样做的好处是,开发者可以完全掌控 token,因为关键信息都已经是你代码和数据库中的一部分了,想怎么弄都可以了
      4. # Token
          GET /foo
          Authorization: Bearer ...2kb token...
  • 有需要的话,要加密并且签名 token
  • 将 JSON Web Tokens 应用到 OAuth 2,关于OAuth验证阮一峰大神博客有.
  • Tokens 不是万能的解决方法,得根据你的需求自行采用

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 9
博文 93
码字总数 36521
作品 0
徐汇
程序员
在AngularJS应用中实现认证授权

在AngularJS应用中实现认证授权 在每一个严肃的应用中,认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用户。用户需要通过认证和授权来...

唐僧他大叔
2014/10/28
0
0
Angular学习碎片 前后端分离用户验证方法

Angular 经常会被用到后台和管理工具的开发,这两类都会需要对用户进行鉴权。而鉴权的第一步,就是进行身份验证。由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所...

创业是喝可乐
05/10
0
0
wer_ltm/YoYoCms.AbpProjectTemplate

演示网站 首先说下这个项目吧。 如标题一样是基于VUE+.NET开发的框架,也是群友一直吼吼吼要一个vue版本的ABP框架。 我们先来看看首页吧: 还比较酷炫,提供下演示账号 演示地址:http://vu...

wer_ltm
2017/09/14
0
0
ASP.NET MVC使用Oauth2.0实现身份验证

 随着软件的不断发展,出现了更多的身份验证使用场景,除了典型的服务器与客户端之间的身份验证外还有,如服务与服务之间的(如微服务架构)、服务器与多种客户端的(如PC、移动、Web等),甚至...

CSharpKit
2017/12/20
0
0
ASP.NET Core 使用 JWT 搭建分布式无状态身份验证系统

原文:ASP.NET Core 使用 JWT 搭建分布式无状态身份验证系统 升级到 Asp.Net Core 2.0 (2017/08/29 更新) 为什么使用 Jwt 最近,移动开发的劲头越来越足,学校搞的各种比赛都需要用手机 APP ...

杰克.陈
2017/12/11
0
0
手机端和网页端使用同一后台时进行会话控制的一种思路

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/。 1.背景 Web端的一次成功的登陆请求后,cookie中会保存此次回话的sessionID,再点击其他...

李晓晖
2015/04/25
0
0
【翻译】Flask大型教程|第二十三章:应用程序编程接口(API)

本文翻译自The Flask Mega-Tutorial Part XXIII: Application Programming Interfaces (APIs) 我为此应用程序构建的所有功能都只适用于特定类型的客户端:Web浏览器。 但其他类型的客户端呢?...

一进制
05/10
0
0
Cookie和Token

前言 本文将首先概述基于cookie的身份验证方式和基于token的身份验证方式,在此基础上对两种验证进行比较。 最后将介绍JWT(主要是翻译官网介绍)。 概述 HTTP是一个“无状态”协议,这意味着...

黄索远
2017/08/12
0
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS)是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。AngularJS很小,只有60K,兼容主流浏览...

oschina
2014/08/24
5.7K
13
学习Identity Server 4的预备知识

我要使用asp.net core 2.0 web api 搭建一个基础框架并立即应用于一个实际的项目中去. 这里需要使用identity server 4 做单点登陆. 下面就简单学习一下相关的预备知识. 基于Token的安全验证体...

daveyoung
2017/10/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

CoreText进阶(七)-添加自定义View和对其

CoreText进阶(七)-添加自定义View和对其 其它文章: CoreText 入门(一)-文本绘制 CoreText入门(二)-绘制图片 CoreText进阶(三)-事件处理 CoreText进阶(四)-文字行数限制和显示更多...

aron1992
7分钟前
0
0
Python爬虫 爬取百合网的女人们和男人们

学Python也有段时间了,目前学到了Python的类。个人感觉Python的类不应称之为类,而应称之为数据类型,只是数据类型而已!只是数据类型而已!只是数据类型而已!重要的事情说三篇。 据书上说...

p柯西
18分钟前
0
0
在Java中,你真的会日期转换吗

1.什么是SimpleDateFormat 在java doc对SimpleDateFormat的解释如下: SimpleDateFormatis a concrete class for formatting and parsing dates in a locale-sensitive manner. It allows fo......

Java小铺
27分钟前
0
0
Linux系统梳理---系统搭建(二):tomcat的安装和使用

上一章讲到JDK的安装使用,这一章主要记录下服务器tomcat的安装以及部署一个项目. 1.下载tomcat,这里下载的是apache-tomcat-8.5.32.tar.gz 2.创建文件夹,便于管理,和JDK一样,在usr目录下创建t...

勤奋的蚂蚁
37分钟前
0
0
ES15-聚合

1.Terms Aggregation 分组聚合 2.Filter Aggregation 过滤聚合

贾峰uk
38分钟前
0
0
【2018.07.19学习笔记】【linux高级知识 20.27-20.30】

20.27 分发系统介绍 20.28 expect脚本远程登录 20.29 expect脚本远程执行命令 20.30 expect脚本传递参数

lgsxp
41分钟前
0
0
10.32/10.33 rsync通过服务同步~10.35 screen工具

通过服务的方式同步要编辑配置文件:[root@linux-xl ~]# vim /etc/rsyncd.confport=873log file=/var/log/rsync.logpid file=/var/run/rsyncd.pidaddress=192.168.43.21[tes...

洗香香
44分钟前
0
0
与女儿谈商业模式 (3):沃尔玛的成功模式

分类:与女儿谈商业模式 | 标签: 经济学 沃尔玛 陈志武 2007-05-10 09:09阅读(11279)评论(30) 与女儿谈商业模式 (3):沃尔玛的成功模式 陈志武 /文 沃尔玛(Wal-Mart)是另一个有意思的财...

祖冲之
51分钟前
0
0
网页加载速度优化方法总结

1、减少请求 最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源,这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。 2、整合资源 对开发...

Jack088
56分钟前
0
0
dubbo学习

https://blog.csdn.net/houshaolin/article/details/76408399

喵五郎
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部