注销用户及修改密码

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() 进行保存。