Vue 中登录功能的简单实现

登录

表单验证用户名与密码，发送登录请求

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

通过接口获取数据

通过axios请求拦截器添加token，保证拥有获取数据的权限

// main.js中，axios请求拦截器
axios.interceptors.request.use(config => {
  // 为请求头对象添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})