Token实现JWT身份认证

小熊快跑
225 阅读3分钟

Token实现JWT身份认证

前言： 什么是token认证，举个生活中的例子，程序员难免都有职业病——腰椎炎、颈椎病。所以，咱们得去养生放松一下，第一次进去，别人会叫你靓仔；养生完了第二次进去，别人不认识你，还是叫你靓仔；第三次第四次还是靓仔；如果你第一次就办了会员卡就不一样了，别人就记住你的，第二次进去就是熊总了。再来看token令牌，第一次登录办卡了(把令牌存到本地)，登录后的各种操作就不需要再次登陆了，后面去养生都知道是熊总来了(每次请求时将token放在请求头发送给服务器，令牌免登录)

1-Token介绍

  • 1.为什么要有token?
    • 默认情况下，HTTP是一个无状态协议，也就是说任何浏览器都可以访问服务器，但是服务器并不能知道浏览器到底是属于哪个用户的。

image.png

  • 2.token是什么 ： 认证令牌

    • token是一串经过加密之后的字符串，相当于是用户一种身份认证令牌。类似于古代的腰牌,现代的工牌。 见到这个牌子，服务器才知道你是自己人，才会把数据响应给你。

  • 3.token应用 ： 免登录
    • 有了token之后，用户就不需要每一次访问网站都要先输入账号密码，才能拿到数据了。 而是只需要登录一次，以后拿着token，服务器就知道你是哪一个用户了。

2-Token工作流程

  • 1.token工作流程介绍

token工作流程分为三个步骤

第一步： 用户发送登录请求

第二步：服务器响应token,客户端将token存储在本地

第三步： 登录之后的所有请求，用户都需要在请求头中发送token

image.png

image.png

image.png

3-使用axios拦截器来发送token

  • 1.发送登录请求
  • 2.服务器响应token，浏览器将token存储在本地

image.png

image.png

  • 3.在request.js文件中，通过拦截器给每一个接口设置请求头发送token

image.png

image.png axios拦截器code:

// 添加请求拦截器 
axios.interceptors.request.use(
  // config：请求报文信息
  function(config) {
    // 在发送请求之前做些什么
    let token = localStorage.getItem('mytoken')
    //如果有token则通过请求头的方式传递,没有token就不发
    if (token) {
      // config.headers请求报文头
      config.headers.Authorization = token
    }
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    return response
  },
  function(error) {
    // 响应错误了，出错了
    // 如果是状态码401,说明token认证失败( 没有token 或者 token过期导致错误都会出现401)
    if (error.response.status == 401) {
      alert('请重新登录')
      window.parent.location.href = './login.html'
    }

    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

4-退出登录功能

  • index.html页面
/* 4.退出功能
(1)删除token
(2)跳转登录页
*/
document.querySelector('.logout').addEventListener('click',function(){
    if ( confirm('确定要退出登录吗？') ) {
		//(1) 销毁token
		localStorage.removeItem('mytoken')
        //(2) 跳转到登录页
		location.href = './login.html'
	}
})
avatar
文章
阅读
粉丝