5 登錄原理

一、 綁定初始值

1 data 返回數據

loginForm: {
        username: 'admin',
        password: '123456'
      }

2 表單中綁定數據

:model="loginForm"
v-model="loginForm.username"
v-model="loginForm.password"

二、提交表單驗證

1 表單中

:rules="loginFormRules"

2 data 加入驗證規則

loginFormRules: {
        username: [
          { required: true, message: '請輸入登錄名稱', trigger: 'blur' },
          { min: 4, max: 20, message: '長度在 4 到 20 個字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '請輸入登錄密碼', trigger: 'blur' },
          { min: 6, max: 20, message: '長度在 6 到 20 個字符', trigger: 'blur' }
        ]
      }

三、重置功能

1 from定義ref

ref="loginFromRef"

2 實現重置方法

resetLoginFrom () {
      this.$refs.loginFromRef.resetFields()
    },

四、實現登錄

1 實現登錄，先驗證.

2 驗證通過再發接口請求.

3 await接收返回狀態確定登錄成功與失敗.

4 sessionStorage保存成功的token，重定向成功路由

login () {
      this.$refs.loginFromRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登錄失敗')
        this.$message.success('登錄成功')
        window.sessionStorage.setItem('token', res.data.token)
        this.$router.push('/home')
      })
    }

五、退出登錄

1 路由導航守衛控制登錄權限

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

2 實現退出登錄，清除token，重定向登錄

logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    }