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.结果如下
以上是 vue-element添加修改密码弹窗 的全部内容， 来源链接： utcz.com/z/374584.html
