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
},
//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添加修改密码弹窗的更多相关文章
- roundcute 添加修改密码插件
添加修改密码插件 现打开main.inc.php 文件,搜索“$rcmail_config['plugins']”,找到: // List of active plugins (in plugins/ ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- exchang2010OWA主界面添加修改密码选项
原文链接:http://www.mamicode.com/info-detail-1444660.html exchange邮箱用户可以登录OWA修改密码,当AD用户密码过期或者重置密码勾选了“用户下 ...
- 学用MVC4做网站六后台管理:6.1.3管理员修改密码
6.1.3修改密码 需要两个action.一个是点击修改密码的链接要显示修改密码的分部视图(对话框形式):另一个是提交的处理action. 1.打开[AdministratorController]添 ...
- sharepoint修改密码
增加SharePoint2010修改域密码功能 前提SharePoint2010的用户基于AD的,因此修改密码是修改了AD的密码,当然也可以修改本机密码(非域的密码).这里我们讨论修改域密码.我们修改 ...
- 循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
用户在系统登录后,一般会提供一个入口给当前用户更改当前的密码,其实更改密码操作是很简单的一个处理,不过本篇随笔主要是介绍结合前后端来实现这个操作,后端是基于ABP框架的,需要对密码的安全性进行一个设置 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- Vue 两个字段联合校验典型例子--修改密码
1.前言 本文是前文<Vue Element-ui表单校验规则,你掌握了哪些?>针对多字段联合校验的典型应用. 在修改密码时,一般需要确认两次密码一致,涉及2个属性字段.类似的涉及 ...
- MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览
目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...
随机推荐
- Linux_用户权限管理
目录 目录 用户管理 useradd创建用户 userdel删除用户 usermod修改用户账号 passwd修改用户密码 用户权限设置 用户组管理 查看用户的属组 修改用户组gpasswd 为没有家 ...
- HTML学习之==>JS
HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python.Go.Java.C++等,都是一种 ...
- 2018.03.27 python pandas merge join 使用
#2.16 合并 merge-join import numpy as np import pandas as pd df1 = pd.DataFrame({'key1':['k0','k1','k2 ...
- 类Enum
int compareTo(E o) 比较此枚举与指定对象的顺序. String name() 返回此枚举常量的名称,在其枚举声明中对其进行声明. int ordinal() 返回枚举常量的序数(它在 ...
- 11 ORA-8102:Index Corruption解析
11 ORA-8102:Index Corruption解析 [oracle@DSI ~]$ oerr ora 810208102, 00000, "index key not found, ...
- LeetCode.872-叶子值相等的树(Leaf-Similar Trees)
这是悦乐书的第334次更新,第358篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第204题(顺位题号是872).考虑二叉树的所有叶子,从左到右的顺序,这些叶子的值形成叶 ...
- 第十届山东省acm省赛补题(1)
今天第一场个人训练赛的题目有点恐怖啊,我看了半个小时多硬是一道都不会写.我干脆就直接补题去了.... 先补的都是简单题,难题等我这周末慢慢来吧... A Calandar Time Limit: 1 ...
- 9.shodan搜索引擎----Metasploit Web GUI----取证工具箱----sAINT间谍软件
shodan搜索引擎 物联网搜索引擎 访问路由器,服务器,网络摄像头,安装CLI banner抓取,端口扫描 www.shodan.io 需要注册账户,支持google账户 搜索 webcams 网络 ...
- 2019JAVA第一次編程总结
2019第二周实验报告 Java实验报告 班级 计算机科学与技术二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/7 评分等级 实验一 Java开发环境与简单Java程序 一. 实验 ...
- POJ 3410 Split convex polygon(凸包)
题意是逆时针方向给你两个多边形,问你这两个多边形通过旋转和平移能否拼成一个凸包. 首先可以想到的便是枚举边,肯定是有一对长度相同的边贴合,那么我们就可以n2枚举所有边对,接下来就是旋转点对,那么假设多 ...