前端 在处理一些后台管理系统的时候 为了个人用户信息的安全 会由原始的默认密码 在用户第一次登录的时候 要求用户强制更改密码
First analyze the critical point
1. First login
2. Forced change
3. Interface display problem
Let’s take a brief look at the renderings
and then analyze the ideas
1. The logo (whether it is the first time to log in) is best provided by the background interface. Of course, the front end can also store it by itself, but it is not recommended
2. If it is the first login, the hidden menu of the first login pop-up box will be displayed (depending on the requirements)
3. If the home page is not displayed normally
Next, look at the code (vue2+element+vuex) vuex storage is for displaying and hiding aside
<template>
<div class="syMain">
<img src="@/assets/syBanner.png" alt="" />
<div class="elDelogLogin">
<el-dialog
ref="dailog"
width="40%"
title="初始密码修改"
:show-close="false"
:visible="dialogTableVisible"
>
<div>
<el-steps :active="active" align-center>
<el-step title="初次登录" />
<el-step title="修改初始密码" />
<el-step title="完成" />
</el-steps>
<div v-if="active == 1" class="topTip">
您好，为了您的账号安全，请点击下一步修改初始密码
</div>
<div v-if="active != 3" style="width: 60%; margin: 0 auto;text-align:center">
<el-form
ref="form"
:model="form"
status-icon
:rules="rules"
>
<el-form-item
v-show="active == 1"
label="登陆账号"
>
<el-input
v-model="name"
:disabled="true"
size="medium"
/>
</el-form-item>
<template v-if="active==2">
<el-form-item
label="原密码"
prop="originPwd"
class="password-item"
>
<el-input
type="password"
v-model="form.originPwd"
autocomplete="off"
:show-password="true"
>
</el-input>
</el-form-item>
<el-form-item
label="新密码"
prop="newPwd"
class="password-item"
>
<el-input
type="password"
v-model="form.newPwd"
autocomplete="off"
:show-password="true"
></el-input>
</el-form-item>
<el-form-item
label="确认新密码"
prop="confirmPwd"
class="password-item"
>
<el-input
type="password"
v-model="form.confirmPwd"
:show-password="true"
autocomplete="off"
></el-input>
</el-form-item>
</template>
</el-form>
<div v-if="active!=1" slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')">上一步</el-button>
<el-button type="primary" @click="submitForm('form')">下一步</el-button>
</div>
<div v-else slot="footer" class="dialog-footer">
<el-button type="primary" style="width:75%" @click="nextTip">下一步</el-button>
</div>
</div>
<div v-if="active === 3" class="ImgTip">
<div style="margin:20px 0">
<img v-if="isSuccess===true" src="@/images/chenggong.png" alt="">
<img v-else src="@/images/filer.png">
</div>
<p v-if="isSuccess === true">修改密码成功</p>
<p v-else>网络开小差了，导致密码修改失败，请重新修改</p>
<el-button
v-if="isSuccess === true"
type="primary"
@click="returnDialogTableVisible"
>重新登录</el-button
>
<el-button v-else type="primary" @click="again">重新修改</el-button>
</div>
<div v-if="active == 2" class="tip">
<h4>温馨提示</h4>
<p>1、密码长度不能低于6个字符</p>
<p>2、密码必须由数字、英文字符组成</p>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {
mapGetters} from "vuex"
import {
changePassword,OneLoginChecked} from "@/api/user"
import md5 from 'js-md5'
export default {
computed:{
...mapGetters(['name'])
},
data() {
// 是否包含一位数字
const regNumber = /(?=.*[\d])/;
// 是否包含一位字母
const regLetter = /(?=.*[a-zA-Z])/;
// 是否包含一位特殊字符
// const regCharacter = /(?=.*[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、])/
// 校验新密码
const validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('新密码不能为空！请重新输入'))
} else {
if (value.length > 16) {
callback(new Error('密码长度不超过16个字符。'))
} else if (value.length < 6) {
callback(new Error('密码长度不低于6个字符。'))
} else {
if (!/^[a-zA-Z\d]{
1}/.test(value)) {
callback(new Error('密码必须以英文字母或数字开头！'))
} else {
if (!regNumber.test(value)) {
callback(new Error('密码必须由数字，英文字母组成!'))
} else if (!regLetter.test(value)) {
callback(new Error('密码必须由数字，英文字母组成!'))
} else{
callback()
}
}
}
}
}
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.form.newPwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
currentRole: "adminDashboard",
dialogTableVisible: false,
form: {
confirmPwd: "",
newPwd: "",
originPwd: "",
},
isSuccess: false,
active: 1,
rules: {
newPwd: [{
required: true,validator: validatePass, trigger: "blur" }],
confirmPwd: [{
required: true,validator: validatePass2, trigger: "blur" }],
originPwd:[
{
required: true, message: '请输入原始密码', trigger: 'blur' },
]
},
};
},
methods:{
nextTip() {
this.active += 1
},
resetForm() {
this.active -= 1
},
again() {
this.active = 1
},
returnDialogTableVisible() {
this.$store.dispatch('isShowSider', true).then(() => {
this.dialogTableVisible = false
this.$store.dispatch("LogOut").then(() => {
this.$store.dispatch("tagsView/removeVisitedViews").then(()=>{
this.$router.replace({
path: '/login'});
location.reload();
})
});
})
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
const params = {
confirmPwd:md5(this.form.confirmPwd),
newPwd:md5(this.form.newPwd),
originPwd:md5(this.form.originPwd)
}
changePassword(params).then(res=>{
if(res.code==0){
this.isSuccess = true
}else{
this.isSuccess = false
}
this.active = 3
})
} else {
return false
}
})
}
},
created(){
OneLoginChecked().then(res => {
const {
code,data} = res
if (code == 0) {
if(data==true){
this.$store.dispatch('isShowSider', true).then(() => {
this.dialogTableVisible = false
})
}else{
this.$store.dispatch('isShowSider', false).then(() => {
this.dialogTableVisible = true
})
}
}
})
}
};
</script>
<style lang="scss" scoped>
.syMain {
// background: #f0f7ff;
// text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.topTip{
text-align: center;
line-height: 30px;
color:red;
font-weight: 700;
margin: 10px 0;
}
.tip{
color:red;
margin-top: 20px;
p{
margin:5px
}
}
.ImgTip{
text-align: center;
margin:0 auto;
p{
margin:20px 0;
}
}
}
</style>
The interactive effect is directly based on the homepage. In fact, there is a disadvantage here. It is assumed that the first time the user enters is not on the homepage. At this time, it cannot be intercepted, but generally speaking, most of the incoming entries are on the homepage. Of course, if it is the first time If the entry is not the home page, then you can intercept it through router.beforeEach. It depends on the situation. I hope it will be helpful to everyone.