I'm currently working on a project where I'm using Flask for the backend and Vue.js for the frontend. I've successfully generated a CSRF (Cross-Site Request Forgery) token in Flask using {{ form.hidden_tag() }} within my templates, which works well. However, I'm facing a challenge when it comes to integrating Vue.js into the mix.

我目前在一个项目中工作，我正在使用烧瓶为后端和Vue.js为前端。我已经在我的模板中使用{{form.den_tag()}}成功地在Flask中生成了一个CSRF(Cross-Site RequestForgery)令牌，运行良好。然而，当涉及到将Vue.js整合到混合中时，我面临着一个挑战。

I'd like to know how to generate and utilize a CSRF token with Vue.js in my Flask application. The problem lies in replicating the same CSRF token handling mechanism within Vue.js as I do with Flask templates.

我想知道如何在我的FlaskTM应用程序中生成和使用带有Vue.js的CSRF令牌。问题在于在Vue.js中复制相同的CSRF令牌处理机制，就像我使用Flask模板所做的那样。

To give you a clearer picture, here's a snippet of my current setup:

为了给你一个更清晰的画面，这里是我当前设置的一个片段：

@app.route("/api/register", methods=['GET','POST'])
    def register():
        data = request.json  # Parse JSON data from the Vue.js frontend
        print(data)
        # Validate and process the registration data
        form = RegistrationForm(**data)
        print(form.username.data)
        if form.validate():
            user = User(username=form.username.data, email=form.email.data)
            user.set_password(form.password1.data)
            db.session.add(user)
            db.session.commit()
        return jsonify(success=True, message='Registration successful')

class RegistrationForm(FlaskForm):
    username = StringField('Username', validators=[
        DataRequired(),
        Length(min=4, max=20),
        Regexp(r'^\w+$', message="Username must contain only letters, numbers, or underscores.")
    ])
    email = StringField('Email', validators=[DataRequired(), Email()])
    password1 = PasswordField('Password', validators=[
        DataRequired(),
        Length(min=8),
        Regexp(r'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]+$',
               message="Password must include at least one uppercase letter, one lowercase letter, one digit, and one special character.")
    ])
    password2 = PasswordField('Confirm Password', validators=[
        DataRequired(),
        EqualTo('password1', message='Passwords must match.')
    ])
    submit = SubmitField('Register')
    
        # sanitization to the username and email fields
    def validate_username(self, field):
        field.data = bleach.clean(field.data)

    def validate_email(self, field):
        field.data = bleach.clean(field.data)

<template>
  <div>
    <h3>Create a new Account!</h3>
    <form @submit.prevent="handleSubmit">
           
      <div>
        <label for="username">Username :</label>
        <input v-model="formData.username" placeholder="username" />
      </div>
      <div>
        <label for="email">Email :</label>
        <input v-model="formData.email" placeholder="email" />
      </div>
      <div>
        <label for="password">Password :</label>
        <input v-model="formData.password" placeholder="password" />
      </div>
      <div>
        <label for="password2">Confirm :</label>
        <input v-model="formData.confirm" placeholder="confirm" />
      </div>
      <button type="submit">Submit</button>
    </form>
    <div v-if="errors.length > 0">
      <p v-for="error in errors" :key="error">{{ error }}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      formData: {
        username: "",
        email: "",
        password: "",
        confirm: "",
      },
      errors: []
    };
  },
  
  
  methods: {
    async handleSubmit() {
      try {
        // Perform validation here (e.g., check if passwords match, etc.)
        if (this.formData.password !== this.formData.confirm) {
          this.errors = ["Passwords do not match"];
          return;
        }

        // Send the registration data to the server with the CSRF token in the header
        const response = await axios.post(
          "http://127.0.0.1:5000/api/register",
          this.formData,
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );

        if (response.data.success) {
          // Registration was successful, perform any necessary actions
          // (e.g., redirect to login page)
          this.$router.push({ name: "login" });
        } else {
          // Handle registration failure
          this.errors = [response.data.message];
        }
      } catch (error) {
        // Handle network or server errors
        console.error(error);
        this.errors = [
          "An error occurred while processing your request. Please try again later.",
        ];
      }
    },
  },
};
</script>

However, despite trying different approaches, I haven't been able to successfully use this CSRF token when making AJAX requests from Vue.js to my Flask backend. How can I include the CSRF token in the request headers when using Axios or any other method in Vue.js?

然而，尽管尝试了不同的方法，但在从Vue.js向我的Flask后端发出AJAX请求时，我还没有成功地使用这个CSRF令牌。在使用Axios或Vue.js中的任何其他方法时，如何在请求标头中包含CSRF令牌？

Your guidance on how to handle CSRF tokens between Flask and Vue.js would be greatly appreciated!

如果您能指导我们如何处理FlASK和Vue.js之间的CSRF令牌，我们将不胜感激！

First Generate and pass the CSRF token to Vue on initial render. Store it in Vue and add to request headers and validate the token in Flask on each request.

首先，在初始呈现时生成CSRF令牌并将其传递给Vue。将其存储在Vue中并添加到请求标头中，并在Flask中对每个请求验证令牌。

Example

示例

1. In Flask, generate the CSRF token and pass it to the initial page render:

@app.route('/')
def index():
  csrf_token = generate_csrf()

  return render_template('index.html', csrf_token=csrf_token) 

2. In Vue, store the CSRF token in a data property:

data() {
  return {
    csrfToken: '' 
  }
}

created() {
  this.csrfToken = // Get from rendered page 
}

3. Add the CSRF token to the Axios request headers:

axios.post('/api/register', data, {
  headers: {
    'X-CSRF-TOKEN': this.csrfToken
  }  
})

4. In Flask, validate the CSRF token on requests:

@app.route('/api/register', methods=['POST'])
def register():
  csrf_token = request.headers.get('X-CSRF-TOKEN')
  if not validate_csrf(csrf_token):
    abort(400)

  // process request