前后端分离中‘跨站请求伪造防护（CSRF）’的使用方式

在MVC框架中，通常将CSRF可以存到cookie中，或者meta和input标签中。但是前后端分离的项目中，可能存在后端只提供API前端存在另外的服务器中，所以直接在html中便不太合适！

在前后端分离的项目中，token需要以api的方式返回。

from flask_wtf.csrf import generate_csrf
#  设置token
@api.route('/token')
def set_cookie():
      token = generate_csrf()
      # 设置 token
      return {
          "token": token
      }

在有了token之后，前端需要将token设置在一个全局都能请求到的地方，以VUE为例，在App.vue中请求token

created(){
  // 每次刷新请求token
  this.$http.get('/api/token')
    .then(response => {
      console.log(response.data)
      // 存储token
      // 保存在vuex中
      this.$store.state.token = response.data.token
    })
}

token存储：
token可以存储在vuex和localStorage中，两者区别在于，vuex存储的是状态，储存在内存中；localStorage是html5本地存储，数据保存在本地

 保存在vuex
  const state = {
    // 用户信息
    user:{
      moblie: '',
      email: '',
      username: '',
      avatar: ''
    },
    // 是否登录
      signIn: false,
      token: '',
  }

在main.js中设置请求拦截

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from './store'

// 请求拦截,每次请求检测vuex中是否存在token
axios.interceptors.request.use(config => {
  if (store.state.token) {
      config.headers.X_CSRFToken = `${store.state.token}`
  }else{
    layer.msg('token不存在!')
  }
  return config
},
  err => {  
      return Promise.reject(err)
  }
)