网站怎么做的防采集,建设网站要求和注意事项,深圳开发微信公众号,wordpress首页按照分类调用在你登录的时候#xff0c;获取到弱密码#xff0c;然后将他存到vuex里面#xff0c;在登录进去之后#xff0c;index页面再去取#xff0c;思路是这样的
一、vuex里面定义密码字段
我是直接在user.js里面写的
import { login, logout, getInfo } from /api/login
impo…在你登录的时候获取到弱密码然后将他存到vuex里面在登录进去之后index页面再去取思路是这样的
一、vuex里面定义密码字段
我是直接在user.js里面写的
import { login, logout, getInfo } from /api/login
import { getToken, setToken, removeToken } from /utils/authconst user {state: {passwordY: },mutations: {SET_PASSWORD: (state, passwordY) {state.passwordY passwordY},},actions: {Cun_PASSWORD({ commit },name){commit(SET_PASSWORD,name)},}
}export default user也可以新建一个哈都一样 二、登录的时候存输入的密码
利用this.$store.dispatch去存Cun_PASSWORD这个就是我actions里面的方法this.loginForm.password就是存入的密码
this.$store.dispatch(Cun_PASSWORD, this.loginForm.password) 三、首页取密码并且做验证
在mouted里面是可以获取到存储到vuex里的密码this.$store.state.user.passwordYuser是我刚刚放到user.js里面了根据你写的变哈 mounted() {this.mima(this.$store.state.user.passwordY)}
methods里面写验证方法 methods: {mima(value){if(!/[0-9]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[^0-9a-zA-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (value.length 8 || value.length 50) {this.$refs.passwordModal.open()}},}, 如果是不符合密码规则就弹出来下面是弹出层组件 四、弹出层组件 templateel-dialogtitle密码过期请修改密码:visible.syncdialogVisible:close-on-click-modalfalse:close-on-press-escapefalseel-form :modelpasswordForm :rulesrules refpasswordFormRef label-width100pxel-form-item label旧密码 propoldPasswordel-input typepassword v-modelpasswordForm.oldPassword autocompleteoff show-password/el-input/el-form-itemel-form-item label新密码 propnewPasswordel-input typepassword v-modelpasswordForm.newPassword autocompleteoff show-password/el-input/el-form-itemel-form-item label确认密码 propconfirmPasswordel-input typepassword v-modelpasswordForm.confirmPassword autocompleteoff show-password/el-input/el-form-item/el-formspan slotfooter classdialog-footerel-button typeprimary clickconfirmPassword确 定/el-button/span/el-dialog/templatescriptexport default {data() {return {dialogVisible: false,passwordForm: {oldPassword: ,newPassword: ,confirmPassword: },rules: {oldPassword: [{ required: true, message: 请输入旧密码, trigger: blur }],newPassword: [{ required: true, message: 新密码不能为空, trigger: blur },{ min: 8, max: 20, message: 长度在 8 到 20 个字符, trigger: blur },{ validator: this.equalToOldPassword, trigger: blur },{validator: (rule, value, callback) {const regexPattern /^(?![a-zA-Z]$)(?![A-Z0-9]$)(?![A-Z\W_!#$%^*~()-]$)(?![a-z0-9]$)(?![a-z\W_!#$%^*~()-]$)(?![0-9\W_!#$%^*~()-]$)[a-zA-Z0-9\W_!#$%^*~()-]*$/; if (!regexPattern.test(value)) {callback(new Error(密码至少包含三种字符类型小写字母、大写字母、数字和特殊字符));} else {callback(); // 这里调用callback来表示验证通过}},trigger: blur}],confirmPassword: [{ required: true, message: 请确认新密码, trigger: blur },{ validator: this.validateConfirmPassword, trigger: blur }]}};},methods: {validateConfirmPassword(rule, value, callback) {if (value ! this.passwordForm.newPassword) {callback(new Error(两次输入密码不一致!));} else {callback();}},equalToOldPassword (rule, value, callback) {if (this.passwordForm.oldPassword value) {callback(new Error(禁止重复使用上次旧密码));} else {callback();}},confirmPassword() {// 验证表单this.$refs.passwordFormRef.validate((valid) {if (valid) {// 调用修改密码的方法this.$parent.updatePassword(this.passwordForm)}});},open() {this.dialogVisible true; // 假设你使用了Element UI的Dialog组件},}};/scriptstyle scoped::v-deep .el-dialog__headerbtn {display: none !important; /* 使用 !important 确保样式覆盖 */}/style
在index里引用 PasswordModal refpasswordModal /import PasswordModal from /components/PasswordModal/index.vue;components: {PasswordModal},index里面加一个改密码的方法
methods: {mima(value){if (value ) {this.$message.warning(请输入密码);} else if (!/[0-9]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[^0-9a-zA-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (value.length 8 || value.length 50) {this.$refs.passwordModal.open()}},updatePassword(passwordForm) {
//这个接口是你自己修改密码的接口记得改updateUserPwd(passwordForm.oldPassword, passwordForm.newPassword).then((response) {this.$modal.msgSuccess(修改成功);this.$store.dispatch(LogOut).then(() {location.href /index})});},methods: {mima(value){if (value ) {this.$message.warning(请输入密码);} else if (!/[0-9]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (!/[^0-9a-zA-Z]/.test(value)) {this.$refs.passwordModal.open()} else if (value.length 8 || value.length 50) {this.$refs.passwordModal.open()}},updatePassword(passwordForm) {updateUserPwd(passwordForm.oldPassword, passwordForm.newPassword).then((response) {this.$modal.msgSuccess(修改成功);this.$store.dispatch(LogOut).then(() {location.href /index})});},
