添加拦截功能

vueblog-vue/src/axios.js

@@ -0,0 +1,52 @@
+import axios from 'axios'
+import Element from "element-ui";
+import store from "./store";
+import router from "./router";
+
+axios.defaults.baseURL='http://localhost:8081'
+
+axios.interceptors.request.use(config => {
+
+  console.log("请求头")
+  // 可以统一设置请求头
+
+  return config
+})
+
+axios.interceptors.response.use(response => {
+    const res = response.data;
+    console.log("请求尾")
+
+    if (res.code === 200) {
+      return response
+    } else {
+      Element.Message({
+        message: response.data.msg,
+        type: 'error',
+        duration: 2 * 1000
+      })
+      return Promise.reject(response.data.msg)
+    }
+
+  },
+  error => {
+    console.log('err' + error)// for debug
+
+    if (error.response.status === 401) {
+      store.commit('REMOVE_INFO');
+      router.push({
+        path: '/login'
+      });
+      error.message = '请重新登录';
+    }
+    if (error.response.status === 403) {
+      error.message = '权限不足，无法访问';
+    }
+
+    Element.Message({
+      message: error.message,
+      type: 'error',
+      duration: 3 * 1000
+    })
+    return Promise.reject(error)
+  })

vueblog-vue/src/main.js

@@ -6,10 +6,11 @@ import store from './store'
 import Element from 'element-ui'
 import editor from "mavon-editor";
 
-import  "element-ui/lib/theme-chalk/index.css"
+import "element-ui/lib/theme-chalk/index.css"
 import 'mavon-editor/dist/css/index.css'
 
-import './permission.js'
+import './permission.js' // 路由拦截
+import './axios.js' // 请求拦截
 
 Vue.use(Element)
 Vue.use(editor)
@@ -22,3 +23,4 @@ new Vue({
   store,
   render: h => h(App)
 }).$mount('#app')
+

vueblog-vue/src/permission.js

@@ -16,8 +16,7 @@ router.beforeEach((to, from, next) => {
       }
     } else {
       next({
-        path: '/login',
-        // query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
+        path: '/login'
       })
     }
   } else {

vueblog-vue/src/router/index.js

@@ -24,18 +24,18 @@ const routes = [
     component: () => import('../views/Blogs.vue')
   },
   {
-    path: '/blog/:blogId',
-    name: 'BlogDetail',
-    component: BlogDetail
-  },
-  {
-    path: '/blog/add',
-    name: 'BlogEdit',
+    path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
+    name: 'BlogAdd',
     meta: {
       requireAuth: true
     },
     component: BlogEdit
   },
+  {
+    path: '/blog/:blogId',
+    name: 'BlogDetail',
+    component: BlogDetail
+  },
   {
     path: '/blog/:blogId/edit',
     name: 'BlogEdit',

vueblog-vue/src/views/BlogDetail.vue

@@ -4,11 +4,10 @@
 
     <div class="mblog">
       <h2>{{ blog.title }}</h2>
+      <el-link icon="el-icon-edit" v-if="ownBlog"><router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">编辑</router-link></el-link>
       <el-divider></el-divider>
       <div class="content markdown-body" v-html="blog.content"></div>
     </div>
-
-
   </div>
 </template>
 
@@ -24,16 +23,13 @@
     },
     data() {
       return {
-        user: {
-          username: null,
-          avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-        },
         blog: {
-          title: "这是标题",
-          description: "这是再要",
-          content: "这是内容呀"
-
-        }
+          userId: null,
+          title: "",
+          description: "",
+          content: ""
+        },
+        ownBlog: false
       }
     },
     methods: {
@@ -50,13 +46,11 @@
           var result = md.render(_this.blog.content);
           _this.blog.content = result
 
+          _this.ownBlog =  true
         });
       }
     },
     created() {
-      this.user.username = this.$store.getters.getUser.username
-      this.user.avatar = this.$store.getters.getUser.avatar
-
       this.getBlog()
     }
   }
@@ -79,4 +73,8 @@
     padding: 20px 15px;
     min-height: 700px;
   }
+  .m-button {
+    /*float: right;*/
+  }
+
 </style>

vueblog-vue/src/views/BlogEdit.vue

@@ -35,10 +35,6 @@
     components: {Header},
     data() {
       return {
-        user: {
-          username: null,
-          avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-        },
         editForm: {
           title: '测试标题',
           description: '测试内容',

vueblog-vue/src/views/Blogs.vue

@@ -26,11 +26,6 @@
     components: {Header},
     data() {
       return {
-        hasLogin: false,
-        user: {
-          username: '请先登录',
-          avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-        },
         blogs: {},
         currentPage: 1,
         total: 0

vueblog-vue/src/views/Login.vue

@@ -11,7 +11,7 @@
         <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                  class="demo-ruleForm">
           <el-form-item label="用户名" prop="username">
-            <el-input type="text" maxlength="6" v-model="ruleForm.username"></el-input>
+            <el-input type="text" maxlength="12" v-model="ruleForm.username"></el-input>
           </el-form-item>
           <el-form-item label="密码" prop="password">
             <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
@@ -40,7 +40,7 @@
       };
       return {
         ruleForm: {
-          password: '111111',
+          password: '111112',
           username: 'markerhub'
         },
         rules: {
@@ -60,7 +60,7 @@
         this.$refs[formName].validate((valid) => {
           if (valid) {
             // 提交逻辑
-            this.$axios.post('http://localhost:8081/login', this.ruleForm).then((res)=>{
+            this.$axios.post('/login', this.ruleForm).then((res)=>{
               const token = res.headers['authorization']
               console.log(res)
               console.log(res.data.data.username)
@@ -87,7 +87,7 @@
       this.$notify({
         title: '看这里：',
         message: '关注公众号：MarkerHub，回复【vueblog】，领取项目资料与源码',
-        duration: 0
+        duration: 1500
       });
     }
   }