登入

表單驗證使用者名稱與密碼，傳送登入請求

login() {
  // 資料驗證
  this.$refs.loginFormRef.validate(async valid => {
    // 驗證不通過
    if (!valid) return
    // 資料請求
    const { data: res } = await this.$https.post('login', this.loginForm)
    // 登入失敗
    if (res.meta.status !== 200) return this.$message.error('登入失敗！')
    // 登入成功
    this.$message.success('登入成功！')
    // 快取token
    window.sessionStorage.setItem('token', res.data.token)
    // 跳轉主頁面
    this.$router.push('/home')
  })
}
 

路由與路由守衛

通過導航守衛判斷使用者是否登入

// 路由配置
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: login },
    { path: '/home', component: home }
  ]
})

// 掛載路由守衛，驗證token是否已存在
router.beforeEach(to, from, next) => {
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
}
 

退出登入

刪除token，跳到登入頁

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