完成修改密码

http-test/modify-password.http

@@ -0,0 +1,19 @@
+POST https://ecs-dev.qmth.com.cn:8878/api/ecs_core/auth/login
+Content-Type: application/json;charset=UTF-8
+
+{"domain":"ecs-dev.qmth.com.cn",
+"accountValue":"20180613",
+"password":"180613",
+"accountType":"STUDENT_CODE"}
+
+
+@token = e061cbf2856d4d559352cc3700f4ec0c
+@key = U_S_109_53286
+
+###
+PUT https://ecs-dev.qmth.com.cn:8878/api/ecs_core/student/password?newPassword=180613&password=180613
+token: {{token}}
+key: {{key}}
+
+
+

src/components/MainLayout/MainLayout.vue

@@ -4,7 +4,7 @@
       <!-- TODO: avatar -->
       <span>{{user.name}}</span>
       <span style="margin: auto 20px">|</span>
-      <span style="display: inline-block; margin-right: 20px; text-align: center;">退出登录</span>
+      <a @click="logout" class="qm-primary-text" style="display: inline-block; margin-right: 20px; text-align: center;">退出登录</a>
     </header>
     <main class="content">
       <slot></slot>
@@ -37,6 +37,11 @@ export default {
     return {
       user: window.wk_user
     };
+  },
+  methods: {
+    logout() {
+      this.$router.push("/login");
+    }
   }
 };
 </script>

src/features/OnlineExam/OnlineExamHome.vue

@@ -1,5 +1,10 @@
 <template>
   <main-layout>
+    <Breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
+      当前所在位置：
+      <BreadcrumbItem>在线考试</BreadcrumbItem>
+    </Breadcrumb>
+
     <div class="home">
       <i-table border :columns="columns" :data="courses"></i-table>
 

src/features/Password/Password.vue

@@ -0,0 +1,145 @@
+<template>
+  <main-layout>
+    <i-breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
+      当前所在位置：
+      <i-breadcrumb-item>修改密码</i-breadcrumb-item>
+    </i-breadcrumb>
+
+    <div class="password-container">
+      <i-form ref="form" :model="form" :rules="rules" style="width: 320px">
+        <i-form-item label="" prop="oldPassword">
+          <i-input type="password" placeholder="请输入旧密码" v-model="form.oldPassword"></i-input>
+        </i-form-item>
+        <i-form-item label="" prop="newPassword">
+          <i-input type="password" placeholder="请输入新密码(6到18位的数字或字母)" v-model="form.newPassword"></i-input>
+        </i-form-item>
+        <i-form-item label="" prop="newPasswordAgain">
+          <i-input type="password" placeholder="请再次输入新密码" v-model="form.newPasswordAgain"></i-input>
+        </i-form-item>
+        <i-form-item style="text-align: left">
+          <i-button size="large" class="qm-primary-button" @click="changePwd">保存</i-button>
+        </i-form-item>
+      </i-form>
+    </div>
+  </main-layout>
+</template>
+
+<script>
+export default {
+  name: "OnlineExamHome",
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else if (!value.match(/^([a-zA-Z]|[0-9]){6,18}$/)) {
+        callback(
+          new Error("请在输入法的英文输入状态下输入数字或大小写的英文字母.")
+        );
+      } else {
+        if (this.form.newPasswordAgain !== "") {
+          // 对第二个密码框单独验证
+          this.$refs.form.validateField("newPasswordAgain");
+        }
+        callback();
+      }
+    };
+    const validatePassCheck = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入新密码"));
+      } else if (value !== this.form.newPassword) {
+        callback(new Error("两次输入的新密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      form: {
+        oldPassword: "",
+        newPassword: "",
+        newPasswordAgain: ""
+      },
+      rules: {
+        oldPassword: [
+          {
+            required: true,
+            message: "请输入旧密码",
+            trigger: "blur"
+          }
+        ],
+        newPassword: [
+          {
+            required: true,
+            message: "请输入新密码",
+            trigger: "blur"
+          },
+          {
+            type: "string",
+            min: 6,
+            message: "密码不能少于6位",
+            trigger: "blur"
+          },
+          {
+            type: "string",
+            max: 18,
+            message: "密码不能多于18位",
+            trigger: "blur"
+          },
+          { validator: validatePass, trigger: "blur" }
+        ],
+        newPasswordAgain: [
+          {
+            required: true,
+            message: "请输入新密码",
+            trigger: "blur"
+          },
+          {
+            type: "string",
+            min: 6,
+            message: "密码不能少于6位",
+            trigger: "blur"
+          },
+          {
+            type: "string",
+            max: 18,
+            message: "密码不能多于18位",
+            trigger: "blur"
+          },
+          { validator: validatePassCheck, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    async changePwd() {
+      const valid = await this.$refs["form"].validate();
+      if (!valid) {
+        return;
+      }
+
+      try {
+        const res = await this.$http.put(
+          `/api/ecs_core/student/password?newPassword=${
+            this.form.newPassword
+          }&password=${this.form.oldPassword}`
+        );
+        if (res.status == 200) {
+          this.$Message.success("保存成功");
+        }
+      } catch {
+        this.$Message.error("保存失败");
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.password-container {
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #eeeeee;
+  border-radius: 6px;
+}
+</style>

src/router.js

@@ -1,10 +1,10 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Home from "./views/Home.vue";
 
 import NotFoundComponent from "./views/NotFoundComponent.vue";
 import OnlineExamHome from "./features/OnlineExam/OnlineExamHome.vue";
-import Login from "./features/login/Login.vue";
+import Login from "./features/Login/Login.vue";
+import Password from "./features/Password/Password.vue";
 
 Vue.use(Router);
 let router = new Router({
@@ -13,7 +13,7 @@ let router = new Router({
     {
       path: "/",
       name: "home",
-      component: Home
+      component: OnlineExamHome
     },
     {
       path: "/login",
@@ -25,6 +25,11 @@ let router = new Router({
       name: "OnlineExamHome",
       component: OnlineExamHome
     },
+    {
+      path: "/password",
+      name: "password",
+      component: Password
+    },
     {
       path: "*",
       component: NotFoundComponent

src/utils/axios.js

@@ -11,6 +11,7 @@ import router from "../router";
  * 1. /login UI => localStorage.removeItem('token') && localStorage.setItem('token')
  * 2. non /login UI => axios if(!wk_token) wk_token = window.localStorage.getItem("token"), send request
  * 3. if axios request fail with 401/403, wk_token = null, redirect to /login removeItem('token')
+ * 4. logout to /login, before send request, invalidate wk_token
  * */
 
 let wk_token, wk_key;
@@ -26,6 +27,8 @@ Axios.interceptors.request.use(
         // Axios.defaults.headers.common["key"] = window.localStorage.getItem("key");
         config.headers.common["key"] = wk_key;
       }
+    } else {
+      wk_token = null;
     }
 
     return config;
@@ -57,6 +60,12 @@ Axios.interceptors.response.use(
           duration: 6,
           closable: true
         });
+      } else {
+        Message.error({
+          content: "未定义异常: " + JSON.stringify(data, 2),
+          duration: 6,
+          closable: true
+        });
       }
     }
     // 登录失效 跳转登录页面

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-  name: "home",
-  components: {
-    HelloWorld
-  }
-};
-</script>