单页应用 - Token 验证

时间 2019-11-06

标签单页应用 token 验证繁體版

原文原文链接

第一次接触单页应用,记录公司项目关于Token验证知识.

Token的工做原理

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

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

路由拦截

// 登陆路由设置个字段,用来记录是否已经登陆
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"){
          ....
        }
      }
    });
  });
}复制代码

auth0.com/blog/ten-th…关于Token,你须要知道的十件事.前端

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

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 不会跨域工做，请使用一个标记 cookiejava

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 不是万能的解决方法，得根据你的需求自行采用

ps : 有些地方仍是不懂,慢慢学.服务器