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')