博兴网站建设招聘网络营销专业毕业论文
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过期判断响应状态码的值是不是401token过期解决方案：需要跳转登录页面让用户重新登录,这样用户登录之后会重新生成一个token*/// =判断响应状态码的值是不是401 如果响应回来的是401 就代表token过期了,就要重新跳转到登录页重新登录if (error.response.status === 401) {location.href = './login.html'}return Promise.reject(error)}
)