详解vue项目中使用token的身份验证的简单实践

三者的区别:

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

关于XSS和XSRF的防范:

XSS 攻击的原理是，攻击者插入一段可执行的 JavaScripts 脚本，该脚本会读出用户浏览器的 cookies 并将它传输给攻击者，攻击者得到用户的 Cookies 后，即可冒充用户。
防范 XSS ，在写入 cookies 时，将 HttpOnly 设置为 true，客户端 JavaScripts 就无法读取该 cookies 的值，就可以有效防范 XSS 攻击。
CSRF是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
防范 CSRF: 因为 Tokens 也是储存在本地的 session storage 或者是客户端的 cookies 中，也是会受到 XSS 攻击。所以在使用 tokens 的时候，必须要考虑过期机制，不然攻击者就可以永久持有受害用户帐号。

相关文章: XSS 和 CSRF简述及预防措施

 //login.vue
 methods: {
  login(){
   if (this.token) {
    //存储在本地的localStograge中
    this.$store.commit(types.LOGIN, this.token)
    //跳转至其他页面
    let redirect = decodeURIComponent(this.$route.query.redirect || '/');
    this.$router.push({
     path: redirect
    })
   }
  }
 }

在vuex中:

import Vuex from 'vuex';
import Vue from 'vue';
import * as types from './types'
Vue.use(Vuex);
export default new Vuex.Store({
 state: {
  user: {},
  token: null,
  title: ''
 },
 mutations: {
  //登录成功将, token保存在localStorage中
  [types.LOGIN]: (state, data) => {
   localStorage.token = data;
   state.token = data;
  },
  //退出登录将, token清空
  [types.LOGOUT]: (state) => {
   localStorage.removeItem('token');
   state.token = null
  }
 }
});

在./types.js中:

export const LOGIN = 'login';
export const LOGOUT = 'logout';