1.使用场景：
注销用户：点击下拉框注销登录，弹出确认框，确认后注销，并重定向到登录页面
修改密码：点击下拉框修改密码，弹出新密码和确认密码，输入后确认，并重定向到登录页面重新登录
<el-dropdown-item><span @click="changePasswd">修改密码</span></el-dropdown-item>
<el-dropdown-item><span @click="logOut">注销登录</span></el-dropdown-item>
注销部分：
logOut() {
const tips = "此操作将注销用户登录，是否继续？"
this.$confirm(tips, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
axios.post(this.$webSite + '/logout_api/').then(response => {
if (response.data.code === 200) {
showSuccess(response.data.msg)
window.localStorage.removeItem('userid');
window.localStorage.removeItem('token');
this.$router.push('/login_page');
} else {
showError(response.data.msg)
}
}).catch(error => {
console.log(error)
showError("请求错误，请联系管理员处理！")
})
}).catch(() => {
const message = '欢迎回来！'
showSuccess(message)
});
},
修改密码：需要开启一个dialog，进行新密码提交
<div>
<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
<el-form :model="form">
<el-form-item label="新密码" :label-width="formLabelWidth" prop="password"
:rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
<el-input placeholder="密码" v-model="form.password" show-password
prefix-icon="el-icon-lock" :minlength=5></el-input>
</el-form-item>
<el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirm_password"
:rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
<el-input placeholder="密码" v-model="form.confirm_password" show-password
prefix-icon="el-icon-lock" :minlength=5></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="handleChange">确 定</el-button>
</div>
</el-dialog>
</div>
修改密码对应的方法：
changePasswd() {
this.dialogFormVisible = true
},
handleChange() {
axios.post(this.$webSite + '/change_pwd_api/', this.form).then(response => {
if (response.data.code === 200) {
showSuccess(response.data.msg)
this.$router.push('/login_page');
} else {
showError(response.data.msg)
}
}).catch(error => {
console.log(error)
showError("请求错误，请联系管理员处理！")
})
}
后台处理逻辑说明：
注销登录：
前端：提交注销请求，请求成功，清除localstorge的token信息，重定向登录页面
后端：接收前端的注销请求，使用Django的logout方法 logout(request) 【from django.contrib.auth import logout】 即可注销登录，之后清除该用户对应token字段的内容(清除的原因是因为有中间件会验证该字段是否有token，无token则代表注销)
tips:后台使用token验证用户登录信息，属于无状态，所以需要在用户表中单独存储token字段，配合中间件验证，达到注销的效果
修改密码：
前端：传递新密码和确认密码
后端：接收两个密码，进行验证，其中复杂度验证如下：大于等于8位的大小写数字字符组合
def check_pwd(text):
if re.search('[a-z]', text) and re.search('[A-Z]', text) and re.search('[0-9]', text) and re.search('[^A-Za-z0-9]', text) and len(text)>=8:
return 1
else:
return 0
验证成功后，使用Django的 set_password(new_password) 设置新密码，并.save() 进行保存。
