Vue登录退出功能

Vue登录/退出功能

登录概述

1.登录业务流程

1. 在登录页面输入用户名和密码

2. 调用后台接口进行验证

3. 通过验证之后，根据后台的响应状态跳转到项目主页

2.登录业务的相关技术点

• http是无状态的
• 通过cookie在客户端记录状态
• 通过session在服务器端记录状态
• 通过token方式维持状态

如果前端与服务器端之间不存在跨域，可以使用cookie或session

如果前端与服务器端之间存在跨域，可以使用token

登录 - token原理分析

登录功能实现

1.登录页面的布局

通过Element-UI组件实现布局

• el-form
• el-form-item
• el-input
• el-button
• 字体图标

2. 路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

// 挂载路由导航守卫 -- 相当于通过token值是否为空 设置了网页的访问权限
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行，可以执行
  //   1. next()放行
  //   2. next('/login) 【强制跳转】到login页面

  /* 如果请求登录页面，就放行 */
  if (to.path === '/login') return next()
  /* 请求登录之后才可以访问的页面 */
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  // 如果token的值为空，表示没有登陆，就强制跳转到登录页面
  if (!tokenStr) return next('/login')
  // 如果token的值不为空，表示已经登陆了，就允许访问页面
  next()
})

退出

基于token 的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的 token之后才可以访问页面。

即： 退出 – 销毁本地的token

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