修改密码

src/api/user.js

 import request from '@/utils/request'
 
-export function login(data) {
-  return request({
-    url: '/admin/login',
-    method: 'post',
-    data
-  })
-}
-
 /**
 * 用户列表
 * @param {*} data
   url: '/admin/user', params
 })
 
+/**
+ * 登录
+ * @param {*} data
+ * @returns
+ */
+export function login(data) {
+  return request({
+    url: '/admin/login',
+    method: 'post',
+    data
+  })
+}
+
 /**
 * 注册账号
 * @param {*} data
 export const getCaptcha = (params) => request({
   url: '/admin/captcha', params
 })
+
+/**
+ * 修改密码
+ * @param {*} data
+ * @returns
+ */
+export const changePassword = (data) => request({
+  url: '/admin/change-password', method: 'put', data
+})
+/**
+ * 启用账号
+ * @param {*} data
+ * @returns
+ */
+export const enableUser = (id) => request({
+  url: `/admin/user/${id}/on`, method: 'put'
+})
+/**
+ * 禁用账号
+ * @param {*} data
+ * @returns
+ */
+export const disableUser = (id) => request({
+  url: `/admin/user/${id}/off`, method: 'put'
+})

src/layout/components/Navbar.vue

           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item @click.native="handlePassword">
+            <span>修改密码</span>
+          </el-dropdown-item>
           <el-dropdown-item @click.native="logout">
             <span>安全退出</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+    <el-dialog
+      title="修改密码"
+      :visible.sync="dialogFormVisible"
+      :show-close="false"
+      :close-on-click-modal="false"
+      style="width:800px; margin:auto"
+    >
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="110px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="原密码" prop="originPassword">
+          <el-input ref="originPassword" v-model="ruleForm.originPassword" type="password" />
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input ref="newPassword" v-model="ruleForm.newPassword" type="password" />
+        </el-form-item>
+        <el-form-item label="再次输入密码" prop="newPassword2">
+          <el-input ref="newPassword2" v-model="ruleForm.newPassword2" type="password" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submit('ruleForm')">修改密码</el-button>
+        <el-button @click="onCancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
+import { changePassword } from '@/api/user'
+import md5 from 'js-md5'
 
 export default {
   components: {
     Breadcrumb,
     Hamburger
   },
+  data() {
+    return {
+      dialogFormVisible: false,
+      ruleForm: {
+        originPassword: undefined,
+        newPassword: undefined,
+        newPassword2: undefined
+      },
+      rules: {
+        originPassword: [
+          { required: true, message: '请输入原密码', trigger: 'blur' }
+        ],
+        newPassword: [
+          { required: true, message: '请输入新密码', trigger: 'blur' }
+        ],
+        newPassword2: [
+          { required: true, message: '请再次输入新密码', trigger: 'blur' }
+        ]
+      }
+    }
+  },
   computed: {
     ...mapGetters(['sidebar', 'avatar'])
   },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    handlePassword() {
+      this.ruleForm.originPassword = ''
+      this.dialogFormVisible = true
+    },
+    submit(formName) {
+      this.$refs[formName].validate((val) => {
+        if (val) {
+          if (this.ruleForm.newPassword !== this.ruleForm.newPassword2) {
+            this.$message('两次密码不一致请重新输入')
+            this.$refs.newPassword2.focus()
+          } else {
+            var newData = { ...this.ruleForm }
+            newData.originPassword = md5(newData.originPassword)
+            newData.newPassword = md5(newData.newPassword)
+            changePassword(newData).then(() => {
+              this.$message('密码修改成功请重新登录')
+              this.onCancel()
+              this.logout()
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    onCancel() {
+      this.dialogFormVisible = false
+      this.ruleForm = {
+        originPassword: undefined,
+        newPassword: undefined,
+        newPassword2: undefined
+      }
     }
   }
 }

src/layout/components/Sidebar/Logo.vue

   },
   data() {
     return {
-      title: 'Vue Admin Template',
+      title: '答题系统',
       logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
     }
   }

src/router/index.js

 
 /* Layout */
 import Layout from '@/layout'
-
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
   {
     path: '/userManage',
     component: Layout,
-    meta: { title: '用户管理', icon: 'form' },
+    meta: { title: '用户管理', icon: 'user' },
     children: [
       {
         path: 'userManage',
         name: '',
         component: () => import('@/views/userManage/index'),
-        meta: { title: '用户管理', icon: 'appconfig' }
+        meta: { title: '用户管理', icon: 'user' }
       }
     ]
   },
     hidden: true
   },
 
-  {
-    path: 'external-link',
-    component: Layout,
-    children: [
-      {
-        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-        meta: { title: 'External Link', icon: 'link' }
-      }
-    ]
-  },
-
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/settings.js

 module.exports = {
 
-  title: 'Vue Admin Template',
+  title: '答题系统',
 
   /**
    * @type {boolean} true | false

src/store/modules/user.js

 import { login } from '@/api/user'
-import { getToken, setToken, removeToken, setUserId } from '@/utils/auth'
+import { getToken, setToken, removeToken, setUserId, removeUserId } from '@/utils/auth'
 import { resetRouter } from '@/router'
+import md5 from 'js-md5'
 
 const getDefaultState = () => {
   return {
 // this.$store.dispatch('user/login', this.loginForm)调用api里面的方法
 const actions = {
   // user login
-  login ({ commit }, userInfo) {
+  login({ commit }, userInfo) {
     const { userName, password } = userInfo
     return new Promise((resolve, reject) => {
-      login({ userName: userName.trim(), password: password }).then(response => {
+      login({ userName: userName.trim(), password: md5(password) }).then(response => {
         const { data } = response
         commit('SET_TOKEN', data.token)
         setToken(data.token)
   },
 
   // user logout
-  logout ({ commit, state }) {
+  logout({ commit, state }) {
     return new Promise((resolve, reject) => {
       removeToken() // must remove  token  first
+      removeUserId()
       resetRouter()
       commit('RESET_STATE')
       resolve()
   },
 
   // remove token
-  resetToken ({ commit }) {
+  resetToken({ commit }) {
     return new Promise(resolve => {
       removeToken() // must remove  token  first
+      removeUserId()
       commit('RESET_STATE')
       resolve()
     })

src/utils/auth.js

 export function getUserId() {
   return Cookies.get(UserIdKey)
 }
+export function removeUserId() {
+  return Cookies.remove(TokenKey)
+}

src/views/login/index.vue

   </div>
 </template>
 <script>
-import md5 from 'js-md5'
 export default {
   name: 'Login',
   data() {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true
-          this.loginForm.password = md5(this.loginForm.password)
           this.$store
             .dispatch('user/login', this.loginForm)
             .then(() => {

src/views/login/register.vue

           tabindex="1"
         />
       </el-form-item>
-
       <el-form-item prop="password">
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
         <el-input
-          :key="passwordType"
           ref="password"
           v-model="regisiterForm.password"
-          :type="passwordType"
-          placeholder="密码"
+          type="text"
+          placeholder="请输入密码"
           name="password"
           tabindex="2"
         />
-        <span class="show-pwd" @click="showPwd">
-          <svg-icon
-            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
-          />
-        </span>
       </el-form-item>
       <el-form-item prop="password2">
         <span class="svg-container">
       disabled: false,
       btnText: '发送验证码',
       time: 0,
-      loading: false,
-      passwordType: 'password'
+      loading: false
     }
   },
   methods: {
         }
       })
     },
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
     handleLogin() {
       this.$refs.regisiterForm.validate((valid) => {
         if (valid) {
             this.$refs.password2.focus()
             return false
           } else {
-            this.regisiterForm.password = md5(this.regisiterForm.password)
-            signUp(this.regisiterForm).then((res) => {
+            var newData = { ...this.regisiterForm }
+            newData.password = md5(newData.password)
+            signUp(newData).then((res) => {
               this.$message('注册成功')
               this.$router.push({ path: '/login' })
             })

src/views/userManage/index.vue

       <el-table-column prop="phone" label="手机号" />
       <el-table-column align="center" label="操作">
         <template slot-scope="scope">
-          <el-button type="text" style="color:red" @click="toogleUser(scope.row.userId)">{{ scope.row.status==1?'禁用':'启用' }}</el-button>
+          <el-button type="text" style="color:red" @click="toogleUser(scope.row)">{{ scope.row.status==1?'禁用':'启用' }}</el-button>
         </template>
       </el-table-column>
     </el-table>
 </template>
 <script>
 import {
-  getUserList
+  getUserList,
+  enableUser,
+  disableUser
 } from '@/api/user'
 
 export default {
       this.onSearch()
     },
     toogleUser(val) {
-      console.log(val)
+      if (val.status === 1) {
+        disableUser(val.userId).then(() => {
+
+        })
+        // console.log('启用')
+      } else {
+        console.log('禁用')
+      }
     }
   }
 }

vue.config.js

   return path.join(__dirname, dir)
 }
 
-const name = defaultSettings.title || 'vue Admin Template' // page title
+const name = defaultSettings.title || '答题系统' // page title
 
 // If your port is set to 80,
 // use administrator privileges to execute the command line.