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.结果如下