不正アクセス：

Question

をフラスコにAPIトークンVueの私は、このファイルを持っている：私は

Vue.component('name-list', { 

    props: ['list'], 

    template: ` 
       <div class="content"> 
        <label class="label"> Names: </label> 
        <ul> 
         <task v-for="name in list" v-text="name"></task> 
        </ul> 
       </div> 
      ` 

}); 

Vue.component('task', { 

    template: ` 
       <li><slot></slot></li> 
      ` 

}); 

new Vue({ 

    el: '#root', 

    http: { 
     root: 'http://127.0.0.1:5000', 
     headers: { 
      Authorization: 'Token secret-token-1' 
     } 
    }, 

    data: { 
     newName: '', 
     nameList: [] 
    }, 

    methods: { 
     addName(){ 
      this.nameList = this.nameList.concat(this.newName); 
      var name = this.newName; 
      this.newName = ''; 

      this.$http.post('/api/name/'+name).then((response) => { 
       console.log(response.message); 
      }); 
     } 
    }, 

    mounted(){ 
     this.$http.get('/api/name').then((response) => { 
      this.nameList= this.nameList.concat(JSON.parse(response.body)); 
      console.log(this.nameList); 
     }); 
    } 


}); 

：

from flask import render_template, redirect, url_for, g 
from flask_httpauth import HTTPTokenAuth 
from app import app, db 
from .models import User 
import json 

auth = HTTPTokenAuth(scheme='Token') 

tokens = { 
    'secret-token-1': 'John', 
    'secret-token-2': 'Susan' 
} 

@auth.verify_token 
def verify_token(token): 
    print token 
    if token in tokens: 
     g.current_user = tokens[token] 
     return True 
    return False 

@app.route('/') 
@auth.login_required 
def index(): 
    print 'Hello %s!' % g.current_user 
    return render_template('show_form.html', 
          title='Vue Request') 

@app.route('/api/name', methods=['GET']) 
@auth.login_required 
def get_name(): 
    users = User.query.all() 
    names = [] 
    for user in users: 
     names.append(user.name) 
    return json.dumps(names) 

をそして、私はAPIを呼び出しますが、私はそれが認可を取得カントこのVueのJSファイルを持っています

curl -v -H "Authorization: Token secret-token-1" 127.0.0.1:5000 

curl -v -H "Authorization: Token secret-token-1" 127.0.0.1:5000/api/name 

しかし、VueJSリクエストから直接承認するにはどうすればよいですか？あなたが設定を使用して、HTTPヘッダーを設定することができます

Answer 1

、

// where populate secret-token-1 from cookies or available web resources 
Vue.http.headers.common['Authorization'] = 'Token secret-token-1'; 

あなたが特定のリクエストのヘッダを送信するためvue-resource を使用している場合、それは、すべてのリクエストのヘッダーを送信します、

this.$http.get('/api/name', function(node) { 
    // handle response 
    }, {headers: {'Authorization': 'Token secret-token-1'}}); 

注：使用get_authtokenのような一般的な機能、私はトークンをハードコード化しました:)