修改密碼頁面

1). 新建修改密碼頁

在 src/views/users 下新建 Password.vue 文件，復制貼入以下代碼：

src/views/users/Password.vue

<template>
  <div class="col-md-9 left-col">
    <div class="panel panel-default padding-md">
        <div class="panel-body">
            <h2><i class="fa fa-lock"></i> 修改密碼</h2>
        <hr>
        <div class="form-horizontal" data-validator-form>
          <div class="form-group">
            <label class="col-sm-2 control-label">密 碼</label>
            <div class="col-sm-6">
              <input v-model.trim="password" id="password" v-validator.required="{ regex: /^\w{6,16}$/, error: '密碼要求 6 ~ 16 個單詞字符' }" type="password" class="form-control" placeholder="請填寫密碼">
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">確認密碼</label>
            <div class="col-sm-6">
              <input v-model.trim="cpassword" v-validator.required="{ title: '確認密碼', target: '#password' }" type="password" class="form-control">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
              <button type="submit" class="btn btn-primary" @click="updatePassword">應用修改</button>
            </div>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditPassword',
data() {
  return {
    password: '', // 密碼
    cpassword: '' // 確認密碼
  }
},
// 在實例創建完成后，初始化密碼的值
created() {
  // 獲取倉庫的用戶信息
  const user = this.$store.state.user

  if (user && typeof user === 'object') {
    // 將倉庫的用戶密碼賦值給當前密碼
    this.password = user.password
  }
},
methods: {
  // 更新密碼
  updatePassword(e) {
    this.$nextTick(() => {
      // 表單驗證通過時
      if (e.target.canSubmit) {
        // 依然分發一個 updateUser 的事件，這里只需傳入密碼信息
        this.$store.dispatch('updateUser', { password: this.cpassword })
        this.$message.show('修改成功')
      }
    })
  }
}
}
</script>

<style scoped>

</style>

2). 添加修改密碼路由

打開 src/router/routes.js 文件，添加修改密碼路由 EditPassword（注釋部分是涉及的修改）:

src/router/routes.js

  // EditPassword
      {
        path: '/users/1/edit_password',
        name: 'EditPassword',
        component: () => import('@/views/users/Password.vue'),
        meta: { auth: true }
      }