登录 登出 修改密码

vue-element-admin/src/router/index.js

@@ -38,6 +38,7 @@ export const constantRouterMap = [
   },
   {
     path: '/login',
+    name: 'login',
     component: () => import('@/views/login/index'),
     hidden: true
   },

vue-element-admin/src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { loginByUsername, logout, getUserInfo } from '@/api/login'
+import { loginByUsername, logout, getUserInfo, updatePass } from '@/api/login'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 const user = {
@@ -52,7 +52,7 @@ const user = {
           const data = response.data
           commit('SET_TOKEN', data.token)
           setToken(response.data.token)
-          resolve()
+          resolve(data)
         }).catch(error => {
           reject(error)
         })
@@ -66,7 +66,7 @@ const user = {
           if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
             reject('error')
           }
-          const data = response.data
+          const data = response.data.data
 
           if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
             commit('SET_ROLES', data.roles)
@@ -136,6 +136,17 @@ const user = {
           resolve()
         })
       })
+    },
+
+    UpdatePass({ commit }, data) { // 修改密码
+      return new Promise((resolve, reject) => {
+        updatePass(data).then((res) => {
+          const resData = res.data
+          resolve(resData)
+        }).catch((err) => {
+          reject(err)
+        })
+      })
     }
   }
 }

vue-element-admin/src/utils/request.js

@@ -9,6 +9,8 @@ const service = axios.create({
   timeout: 10000 // request timeout
 })
 
+service.defaults.withCredentials = true
+
 // request interceptor
 service.interceptors.request.use(
   config => {
@@ -28,7 +30,18 @@ service.interceptors.request.use(
 
 // response interceptor
 service.interceptors.response.use(
-  response => response,
+  response => {
+    // console.log('response: ', response)
+    const resData = response.data
+    if (resData.code !== '0') {
+      Message({
+        message: resData.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+    }
+    return response
+  },
   /**
    * 下面的注释为通过在response里，自定义code来标示请求状态
    * 当code返回如下情况则说明权限有问题，登出并返回到登录页
@@ -63,7 +76,7 @@ service.interceptors.response.use(
   //   }
   // },
   error => {
-    console.log('err' + error) // for debug
+    console.log('err :', error) // for debug
     Message({
       message: error.message,
       type: 'error',

vue-element-admin/src/views/layout/components/Navbar.vue

@@ -19,9 +19,31 @@
           <el-dropdown-item divided>
             <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
           </el-dropdown-item>
+          <el-dropdown-item divided>
+            <span style="display:block;" @click="showPass">修改密码</span>
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+      title="修改密码"
+      width="30%">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="旧密码" prop="oldPass">
+          <el-input v-model="form.oldPass"/>
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPass">
+          <el-input v-model="form.newPass"/>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="upPass('form')">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -45,6 +67,24 @@ export default {
     LangSelect,
     ThemePicker
   },
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        oldPass: '',
+        newPass: ''
+      },
+      rules: {
+        oldPass: [
+          { required: true, message: '请输入旧密码', trigger: 'blur' }
+        ],
+        newPass: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+          { min: 6, message: '请输入最少6位', trigger: 'blur' }
+        ]
+      }
+    }
+  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -61,6 +101,35 @@ export default {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()// In order to re-instantiate the vue-router object to avoid bugs
       })
+    },
+    handleClose(done) {
+      done()
+    },
+    showPass() {
+      this.form.oldPass = ''
+      this.form.newPass = ''
+      this.dialogVisible = true
+    },
+    upPass(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$store.dispatch('UpdatePass', this.form).then((res) => {
+            const resCode = res.code
+            if (resCode === '0') {
+              this.$message.success(res.message || res.msg)
+              this.dialogVisible = false
+              return
+            }
+
+            this.$message.error(res.message || res.msg)
+          }).catch((err) => {
+            console.log('UpdatePass err: ', err)
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
     }
   }
 }