关于token，它到底是个啥？

token是什么？

2.token是什么 ： 身份令牌

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

jwt全称JSON WEB Token：它是一个后端加密并转换生成的一个字符串, 里面存储着本次登录的用户相关信息 (需要登录, 输入正确的账号和密码 换取)

为什么要有token?

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zLaUBb8P-1668956245401)(assets/1668955952537.png)]

为了项目的安全性，设置了这个token

token应用场景

• 免登录功能 ： 用户在输入账号、密码登录之后，只需要将服务器返回的token存入到本地。之后用户进入网站只需要取出token发给服务器。 服务器就知道你是哪一个用户了，从而避免每一次进入网站都需要用户重新登录一次。
• 权限控制：有的网页需要做一个权限控制，你只有登录了才可以访问。没有登录就会自动跳转到登录页。这个时候只需要判断用户的token是否有效即可。例如订单列表页，如果用户token有效，说明用户已经登录了就可以成功跳转。如果用户token无效，说明用户没有登录，就跳转到登录页让用户先登录。

token存储在哪？过期了怎么办？

一般将token存储字啊本地存储里面,因为本地存储是存在硬盘里面浏览器关闭后不会清除,除非手动清除.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6YAOILsH-1668956245407)(assets/1668955966066.png)]

token身份过期了需要重新获取登录token

判断响应状态码的值是不是401

token过期解决方案：需要跳转登录页面让用户重新登录,这样用户登录之后会重新生成一个token*

请求拦截与响应拦截执行时机

请求拦截

// 添加请求拦截器
axios.interceptors.request.use(
	function (config) {
		// ★config就是配置对象,就是axios{}中括号里面的的东西就是请求报文,(请求行请求头请求体),有url,method,data,headers...

		//=思路:以后会有很多接口需要token令牌,那么每一个请求都要给令牌就很麻烦,我们在这里统一把所有请求都拦截下来,统一给它携带token令牌就行了.
		//在这个案例里除了登录和注册两个接口不需要token令牌身份认证,其他的接口都需要token令牌身份认证.  那么如何做呢,用户一登录就会产生一个token,我们可以根据这个来设置if判断条件.

		// 在发送请求之前做些什么
		// 判断一下有没有token,
		const token = localStorage.getItem('cmsToken')
		// console.log(token)
		//=思路:发送ajax-请求之前,本地存储里面如果有token就表示用户登录了,此时之后其他的请求就需要携带Authorization这个请求头里面带上token身份认证. 那如何在请求头里面带上身份认证呢? config里面加上headers属性就行了
		if (token) {
			config.headers.Authorization = token
		}
		return config
	},
	function (error) {
		// 对请求错误做些什么

		return Promise.reject(error)
	}
)

响应拦截

// 添加响应拦截器
axios.interceptors.response.use(
	// ★response就是成功的响应,就是axios().then() 点then括号里面的东西,就是res,就是响应报文(响应行,响应头响应体)
	function (response) {
		// 2xx 范围内的状态码都会触发该函数。
		// 对响应数据做点什么
		return response
	},
	function (error) {
		// 超出 2xx 范围的状态码都会触发该函数。
		// 对响应错误做点什么
		// =响应拦截的作用1:统一处理响应的错误信息
		Toast.fail(error.response.data.message)

		/* 总结
      token过期
      判断响应状态码的值是不是401
      token过期解决方案：需要跳转登录页面让用户重新登录,这样用户登录之后会重新生成一个token
    */

		// =判断响应状态码的值是不是401 如果响应回来的是401 就代表token过期了,就要重新跳转到登录页重新登录
		if (error.response.status === 401) {
			location.href = './login.html'
		}
		return Promise.reject(error)
	}
)