封装axios

src/App.vue

@@ -22,7 +22,6 @@ import HeaderBanner from "./components/HeaderBanner";
 import Navigation from "./components/Navigation";
 import LoginInfo from "./components/LoginInfo";
 import Routerbanner from "./components/RouterBanner"
-import qs from 'qs'
 export default {
   components: {
     HeaderBanner,
@@ -38,6 +37,7 @@ export default {
     }
   },
   methods: {
+    // 点击路由，导航栏对应变化
     changeNav: function(navTitle1, navTitle2){
       this.navTitle1 = ' > ' + navTitle1;
       if (navTitle2) {
@@ -45,21 +45,45 @@ export default {
       } else {
         this.navTitle2 = '';
       }
+    },
+    // 测试接口
+    getData() {
+      // 正常token
+      // dXNlcklkPTEyMyZhY2NvdW50PWRmc2FmYWVyJmZyb209c2l3ZWkmdGltZXN0YW1wPTE2MTY4NDYxMzkmc2lnbj1mOWUwNzJhZGUwODE4YjhhNzMzN2I0ZTMzMzU2OWJjOA==
+      let query = this.$route.query || {};
+      let token = query.token || '';
+      console.log('token:', token);
+      if(!token) {
+        alert('token值为空');
+        return
+      }
+      this.$http({
+        method: 'post',
+        url: '/auth/checkSign',
+        data: {
+          token: token
+        }
+      }).then((res) => {
+        console.log(res);
+        if(res.status === 200){
+          if(res.data.code === 200) {
+            console.log(res.data, '200');
+          }else {
+            let message = res.data.message;
+            console.log('message', message);
+            alert(message);
+          }
+        }
+      }).catch((err) => {
+        alert('无法校验的字符串');
+        console.log(err);
+      })
     }
   },
   mounted() {
-    this.$axios({
-      method: 'post',
-      url: '/api/auth/checkSign',
-      data: qs.stringify({
-        token: 'dXNlcklkPXh4eHh4JmFjY291bnQ9eHh4eHgmZnJvbT1zaXdlaSZ0aW1lc3RhbXA9MTYxNjY1NDMxOSZzaWduPTllMDQxMDgzMTNlZmI5M2Y2OGQ3YWI4ZTUzZTQwYTIx'
-      })
-    }).then(function (response) {
-      console.log(response);
-      if(response.data.code === 200) alert('token验证success!')
-    }).catch(function (error) {
-      console.log(error);
-    });
+  },
+  created() {
+    this.getData();
   }
 };
 </script>
@@ -85,6 +109,7 @@ button{
 }
 #app {
   background-color: #eeeeee;
+  // display: none;
   .app_content {
     width: 1190px;
     margin: 0 auto;

src/main.js

@@ -1,10 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import axios from 'axios'
+import axiosApi from './request/api'
 
 Vue.config.productionTip = false
-Vue.prototype.$axios = axios
+Vue.prototype.$http = axiosApi
 
 new Vue({
   router,

src/request/api.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import qs from 'qs';
+// axios.defaults.baseURL = 'http://8.136.230.133:8080';
+axios.defaults.baseURL = '/api'
+axios.defaults.timeout = 5000;
+// axios.defaults.headers.common['token'] = token
+
+// 请求拦截器
+axios.interceptors.request.use((config) => {
+    if(config.method.toLowerCase() === 'post') {
+        config.data = qs.stringify(config.data);
+    }
+    return config;
+}, (err) => {
+    console.log('请求拦截',err);
+    return Promise.reject(err);
+})
+
+// 响应拦截器
+axios.interceptors.response.use((config) => {
+    return config;
+}, (err) => {
+    console.log('响应拦截', err);
+    return Promise.reject(err);
+})
+
+export default axios