基于token的一个登录与退出组件

笔记

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

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

注意：

• 如果我们的前端和后台接口之间不存在跨域问题，我们一般使用 cookie 和 session 来记录登录状态
• 如果存在跨域问题，我们一般就使用 token 来维持登录状态

2. token 原理分析

token是保证用户登录成功之后的唯一身份令牌

1. 登录页面输入用户名和密码进行登录
2. 服务器验证通过之后生成该用户的 token 值，并将该值返回给客户端

   注意：

   1. token是由服务器生成的
   2. 每个不同的用户对应的 token 值是不一样的
3. 客户端存储该 token
4. 客户端后续所有的请求都会携带该 token 发送请求，从而使我们的服务器能够根据不同的token值来判断这个请求属于哪个用户，针对不同的用户返回不同的结果
5. 服务器验证该 token 是否存在，如果存在就证明已经登录了，然后根据这个token 来返回相应的数据

3. git相关知识

• 在已经安装git的情况下配置公钥
• 指令
• 查看当前工作区是否干净：git status
• 创建分支：git checkout -b “分支名称”
• 查看所有分支：git branch （打*是当前分支）
• 将内容从工作目录添加到暂存区：git add .
• 将暂存区内容添加到本地仓库中: git commit -m “备注”
• 合并其他分支：git merge “要合并的分支名”

webpack配置属性——devServer

4. 全局样式

• 在src目录下添加静态目录assets/styles
• 在styles目录下创建一个css文件
• 在main.js里导入

// 导入全局样式表
import './assets/styles/reset.css'

// 导入字体图标
import './assets/fonts/iconfont.css'

5. 登录之后的操作

• 我们所有的页面都应该是登录成功之后才能够进行访问的，那么我们怎么判断是否登录成功了呢，此时就需要用到我们的token，因为token是我们登录成功之后的，服务器颁发给我们的唯一令牌
• 我们需要执行下面两个操作

1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
   1. 项目中出了登录之外的其他API接口，必须在登录之后才能访问
   2. token只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中

window.sessionStorage.setItem("token", res.data.token);

• 通过编程式导航跳转到后台主页，路由地址是 /home

• // 先在路由表里进行如下配置
      {
        path: '/home',
        component: Home
      }
  
  // 然后在Login组件里登录成功之后写编程式导航对象调用push方法
  this.$router.push('/home')
  

  6. 退出功能的实现

  • 原理：

  • 基于token的方式实现退出比较简单，只需要销毁本地的token即可

  • 这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问页面

  • 代码如下：

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