vue-element添加修改密碼彈窗

1.新建修改密碼vue文件CgPwd.vue

代碼如下:

<template>
    <!-- 修改密碼界面 -->
    <el-dialog :title="$t('common.changePassword')" width="40%" :visible.sync="cgpwdVisible" :close-on-click-modal="false" :modal-append-to-body='false'>
        <el-form :model="dataForm" label-width="80px" :rules="dataFormRules" ref="dataForm" :size="size"
            label-position="right">
            <el-form-item label="舊密碼" prop="oldpassword">
                <el-input v-model="dataForm.oldpassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密碼" prop="newpassword">
                <el-input v-model="dataForm.newpassword" type="password" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: 5px;">
            <el-button :size="size" @click.native="cgpwdVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      size: 'small',
            cgpwdVisible: false, // 編輯界面是否顯示
      editLoading: false,   //載入圖標
      //初始化數據
      dataForm: {
                oldpassword: '',
                newpassword: ''
      },
      //設置屬性
      dataFormRules: {
                oldpassword: [
                    { required: true, message: '請輸入舊密碼', trigger: 'blur' }
        ],
                newpassword: [
                    { required: true, message: '請輸入新密碼', trigger: 'blur' }
        ]
      },
      //獲取全局url
      baseUrl: this.global.baseUrl
    }
  },
  methods: {
  　// 設置可見性
    setCgpwdVisible: function (cgpwdVisible) {
      this.cgpwdVisible = cgpwdVisible
    },

      // 提交請求

    　submitForm: function () {

      //this.$refs.XXX 獲取ref綁定的節點

      this.$refs.dataForm.validate((valid) => {

        if (valid) {

          this.$confirm('確認提交嗎？', '提示', {}).then(() => {

            let params = Object.assign({}, this.dataForm)

            params.user = 'admin'

            this.$api.cgpwd.pwdUpd(params).then((res) => {

              this.editLoading = true

              if(res.code == 200) {

                this.$message({ message: '操作成功' + res.msg, type: 'success' })

                this.cgpwdVisible = false       //隱藏該窗口

              } else {

                this.$message({message: '操作失敗, ' + res.msg, type: 'error'})

              }

              this.editLoading = false

              this.$refs['dataForm'].resetFields()    //重置表單

            })

          })

        }

      })

     }

  },

//mounted： 在這發起后端請求，拿回數據，配合路由鈎子做一些事情  （dom渲染完成 組件掛載完成 ）
  mounted() {
        
    }
}
</script>

<style scoped>

</style>

2.修改原有密碼修改button

        <span class="main-operation-item">
          <el-button size="small" icon="fa fa-key" @click="showCgpwdDialog"> 修改密碼</el-button>
        </span>

3.增加動態引用

    <!--修改密碼界面-->
    <CgPwd ref="cgpwdDialog" @afterRestore="afterCgpwd"></CgPwd>

4.在原有vue文件script中進行修改

//引入Cgpwd.vue文件
import CgPwd from "@/views/Sys/CgPwd"

export default {
  ...
  //在components中添加CgPwd,這樣<CgPwd>才不會報錯
  components:{
    ...
    CgPwd
  },
  ...
  methods: {
    ...
    //顯示密碼修改彈窗界面
    showCgpwdDialog: function() {
      this.$refs.cgpwdDialog.setCgpwdVisible(true)
    },
    ...
  },
  mounted() {
  }
}

5.添加路由

新建文件cgpwd.js

import axios from '../axios'

/*
 * 用戶密碼修改
 */

// 保存
export const pwdUpd = (data) => {
    return axios({
        url: '/user/pwdupd',
        method: 'post',
        data
    })
}

6.在接口統一集成模塊api.js中添加

import * as cgpwd from './moudules/cgpwd'

export default {
    ...
    cgpwd
}

 

7.在后台controller中添加代碼

使用@RequestBody來接收body

/**
 * 修改密碼
 * @return
 */
@RequestMapping(value="/pwdupd")
public String pwdupd(@RequestBody String body) {
    return body;

}

 

8.添加權限例外

import com.vuebg.admin.security.JwtAuthenticationFilter;
import com.vuebg.admin.security.JwtAuthenticationProvider;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.security.web.authentication.logout.HttpStatusReturningLogoutSuccessHandler;


/**
 * Spring Security Config
 * @author
 * @date 2018-12-12
 */
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private UserDetailsService userDetailsService;

    @Override
    public void configure(AuthenticationManagerBuilder auth) throws Exception {
        // 使用自定義身份驗證組件
        auth.authenticationProvider(new JwtAuthenticationProvider(userDetailsService));
    }

    /**
     * 添加不需要進行權限驗證的url
     * @param http
     * @throws Exception
     */
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // 禁用 csrf, 由於使用的是JWT，我們這里不需要csrf
        http.cors().and().csrf().disable()
                .authorizeRequests()
                // 跨域預檢請求
                .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
                ...//修改密碼
                .antMatchers("/user/pwdupd").permitAll()
                // 其他所有請求需要身份認證
                .anyRequest().authenticated();
        // 退出登錄處理器
        http.logout().logoutSuccessHandler(new HttpStatusReturningLogoutSuccessHandler());
        // token驗證過濾器
        http.addFilterBefore(new JwtAuthenticationFilter(authenticationManager()), UsernamePasswordAuthenticationFilter.class);
    }

    @Bean
    @Override
    public AuthenticationManager authenticationManager() throws Exception {
        return super.authenticationManager();
    }

}

 

 

9.結果如下