Vue实现登录退出功能

1. 登录功能

登录功能是基于Element-UI表单验证规则进行前端验证

(1) 在data中添加验证规则

loginFormRules: {
 // 登录名称的验证规则
 username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }，
      { min: 2, max: 10,message: '长度在 2 到 10 个字符', trigger: 'blur'}]，
 password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }，
      { min: 6, max: 18,message: '长度在 6 到 18 个字符', trigger: 'blur'}]]
}

(2) 动态绑定验证规则 :rules， 通过 prop 对应验证规则

<el-form ref="loginFormRef" :rules="loginFormRules">
  <el-form-item label="账号" prop="username"> </el-form-item>
  <el-form-item label="密码" prop="password"> </el-form-item>
</el-form>

(3) 通过validate方法进行前端验证，发送网络请求进行后端验证

// 进行表单验证
this.$refs.loginFormRef.validate(async valid => {
 // 如果验证失败，直接退出后续代码的执行
 if (!valid) return
 // 发送网络请求，进行后端验证
 // const { data: res } = await this.$http.post('login', this.loginForm)
 // 验证通过后这里完成登录成功后的相关操作（保存token、跳转到主页）
 // window.sessionStorage.setItem('token', res.data.token)
 // this.$router.push('/home')
})

2. 退出功能

基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。

这样，后续的请求就不会携带token ，必须重新登录生成一个新的 token 之后才可以访问页面。

 // 清空token
 window.sessionStorage.clear()
 // 跳转到登录页
 this.$router.push('/login')