Vue实战之 3. 登录/退出功能

1. 登录概述

1. 登录业务流程

1. 在登录页面输入用户名和密码
2. 调用后台接口进行验证
3. 通过验证之后，根据后台的响应状态跳转到项目主页

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

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

如果前端与服务器之间存在跨域问题，则需要使用token方式来维持登录状态。反之，则用cookie和session。

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

2. 登录 — token原理分析

3. 登录+退出功能的具体实现

1. 登录页面的布局

通过 Element——UI 组件实现布局

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

具体步骤

1.先创建分支（在开发中，如果要开发新功能，尽量把新功能放到一个新的分支上进行开发，分支开发完成以后，再合并到master主分支上）

2. 通过gui 来查看项目的运行效果

3.创建登录组件

4.基于Element-UI进行表单验证

 loginFormRules: {
        // 验证用户名是否合法
        username: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码是否合法
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }

2. 实现登录以及重置

1. 通过axios 调用登录验证接口
2. 登录成功之后保持用户的 token 信息
3. 跳转到项目主页

 methods: {
    // 点击重置按钮，重置登录表单
    resetLoginForm () {
      // console.log(this);
      this.$refs.loginFormRef.resetFields()
    },
    // 表单的预验证
    login () {
      this.$refs.loginFormRef.validate(async (valid) => {
        // console.log(valid)
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        console.log(res)
        if (res.meta.status !== 200) return this.$message.error('登录失败')
        this.$message.success('登录成功!')
        // 1. 将登陆成功之后的 token，保存到客户端的 sessionStorage中
        //  1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
        //  1.2 token 只应在当前网站打开期间生效，所以将 token 保存到 sessionStorage中
        //  1.3 localStorage 是持久化的存储机制，sessionStorage是会话期间的存储机制
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })
    }
  }

关于localStorage 和 sessionStorage的区别如下：

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

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

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

router.beforeEach((to, from, next) => {
  // 如果访问的是登录页面
  if (to.path === '/login') return next()
  // 如果访问的不是登录页面，则要先检查是否有token
  const tokenStr = window.sessionStorage.getItem('token')
  // 如果没有token
  if (!tokenStr) return next('/login')
  // 如果有token
  next()
})

4. 退出功能实现原理

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

methods: {
    logout () {
      // 清空token
      window.sessionStorage.clear()
      // 跳转到登录页
      this.$router.push('/login')
    }
  }

4. 提交登录功能代码

当写完登录功能代码时，查看一下当前项目中的源代码状态：

输入 gitt add . 之后再运行 git commit -m ：

查看分支：

将login分支中的代码合并到master主分支中：

把本地的master分支推送到云端的码云中：

刷新gitee页面：

那如果希望把本地的login分支推送到云端进行保存该怎么办？（云端只有一个master默认分支）

刷新gitee页面，出现了login子分支：