拦截器

src/main.js

@@ -7,6 +7,42 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import axios from "axios"
 Vue.use(ElementUI);
+// axios 全局的url前缀
+axios.defaults.baseURL = "https://tomcat.theluyuan.com/vegetables"
+// 请求拦截器 请求前修改请求的配置 可以添加token 请求头 
+axios.interceptors.request.use((config)=>{
+  console.log(config)
+  // 这个请求的配置 axios({})
+  // config.url="11111"
+  // dom 添加盖板
+  // config.baseURL = "2222"
+  config.headers.token = localStorage.getItem("token")
+  return config
+})
+
+
+// 响应拦截器
+// 获取后台的信息 修改 或者 跳转页面
+axios.interceptors.response.use((res)=>{
+  console.log(JSON.stringify(res),"这是拦截器的")
+  // res.data = "这是修改之后的"
+  if(res.data.message == "请输入正确的用户信息"){
+    router.push("/index")
+  }
+  // 删除盖板
+    alert("信息")
+  return res
+})
+
+axios.interceptors.response.use((res)=>{
+  console.log("这是第二个")
+  return res
+})
+
+axios.interceptors.response.use((res)=>{
+  console.log("这是第san 个")
+  return res
+})
 Vue.prototype.axios = axios
 // vue 使用这个插件
 Vue.use(VueRouter)

src/pages/login.vue

@@ -17,6 +17,15 @@
                 <el-button type="primary" @click="onSubmit">登录</el-button>
             </el-form-item>
         </el-form>
+        <!-- [{name:"1232",ge:123}] -->
+        <el-table :data="tableData" style="width: 100%">
+            <el-table-column prop="id" label="ID" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="名字" width="180">
+            </el-table-column>
+            <el-table-column prop="des" label="简介"> </el-table-column>
+            <el-table-column prop="cateId" label="cateId"> </el-table-column>
+        </el-table>
     </div>
 </template>
 
@@ -25,28 +34,29 @@
 
 <script>
 export default {
-    data(){
+    data() {
         return {
-            formInline:{
+            formInline: {
-                user:"",
+                user: "",
-                pwd:""
+                pwd: "",
-            }
+            },
-        }
+            tableData:[]
+        };
     },
-    methods:{
+    methods: {
-        onSubmit(){
+        onSubmit() {
-            console.log(this.formInline)
+            console.log(this.formInline);
-            // jquery data 
+            // jquery data
             // params url
             // data 请求体传参
             // promise
             // this.axios({
             //     url:"https://tomcat.theluyuan.com/vegetables/user/login",
             //     method:"post",
-                // params:{
+            // params:{
-                //     phone:this.formInline.user,
+            //     phone:this.formInline.user,
-                //     password: this.formInline.pwd
+            //     password: this.formInline.pwd
-                // }
+            // }
             // }).then((res)=>{
             //     console.log(res.data)
             // })
@@ -60,15 +70,32 @@ export default {
             //     }).then((res)=>{
             //         console.log(res.data)
             //     })
-            this.axios.get("https://tomcat.theluyuan.com/vegetables/user/login",{
+            // 全局的 baseURL + url
-                params:{
+            this.axios
-                    adasd:213,
+                .post("/user/login", {
-                    dasd:111
+                    phone: this.formInline.user,
-                }
+                    password: this.formInline.pwd,
-            }).then((res)=>{
+                })
-                console.log(res)
+                .then((res) => {
-            })
+                    console.log(res);
-        }
+                    localStorage.setItem("token",res.data.data.token)
-    }
+                    return this.axios.post(
+                        "/product/selectall"
+                    );
+                })
+                .then((res) => {
+                    console.log(res);
+                    this.tableData = res.data.data
+                });
+            // this.axios.get("cf://www.baidu.com",{
+            //     params:{
+            //         adasd:213,
+            //         dasd:111
+            //     }
+            // }).then((res)=>{
+            //     console.log(res)
+            // })
+        },
+    },
 };
 </script>