vue-axios-使用JwtToken

打开项目：Vue.Demo

新增一个axios.js

import Vue from 'vue';
import axios from 'axios';
import store from '../store';

Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://localhost:5004/api';
axios.defaults.headers.common['Authorization'] = "Bearer " + store.state.oidcStore.access_token;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    config.headers.Authorization = "Bearer " + store.state.oidcStore.access_token;
    console.info(config);
    return config;
}, function(error) {
    return Promise.reject(error);
});

export default axios

Home.vue 使用：axios

<template>
  <div>
        <SignedInUser />
    <router-link :to="{ name: 'welcome'}">to welcome</router-link>
  
    <br/>
    <div>
      Name:<input type="text" v-model="product.name">
      <div>
        <span>{{product.name | capitalize}}</span>
      </div>
    </div>
    <div>
      Leves:<label>高</label> <input type="checkbox"  value="H" v-model="product.leves"/>
      <label>中</label> <input type="checkbox"  value="M" v-model="product.leves"/>
      <label>低</label> <input type="checkbox"  value="L" v-model="product.leves"/>
    </div>
    <div>
      <button v-on:click="show">show</button>  <br/> 
      <button v-on:click="request">requestApi</button>
    </div>
    <h1>Lazy</h1>
    <div>
      <div><input type="text" v-model="product.price" lazy debounce="5000"></div>
      <div>showPrice:{{product.price}}</div>
      <div>ComputedResult:{{total}}</div>
    </div>

  <div>Search:<input type="text" ></div>
    <ul v-for="(item, index) in product.leves " :key="index">
      <li >{{index}}{{item}}</li>
    </ul>
  </div>

</template>

<script>
    //import axios from 'axios';
    import axios from '../config/axios.js'
    import SignedInUser from './SignedInUser.vue'

    export default {
        name: 'Home',
        components: {
            SignedInUser
        },
        data() {
            return {
                product: {
                    name: "xiaomi",
                    leves: ["M", "L"],
                    price: 100
                }
            }
        },
        methods: {
            show: function() {
                alert(JSON.stringify(this.product));
            },
            request: function() {
                axios.get('/values')
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });


                axios.post('/values', JSON.stringify({
                        name: "hiword"
                    }))
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });

                axios.put('/values/123', JSON.stringify({
                        name: "hiword"
                    }))
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });

                axios.delete('/values/123')
                    .then(function(response) {
                        console.info(response);
                    })
                    .catch(function(error) {
                        console.debug(error);
                    });
            }
        },
        computed: {
            total: function() {
                return this.product.price * 0.283;
            }
        }
    };
</script>

<style scoped>

</style>

查看Http请求：

现在完整的演示一遍：

1.启动认证服务

2.启动Api服务

3.启动Node服务

   3.1 登录

   3.2 调用授权Api