vue之 token和acync(await)

06
六月
2021

1.token(令牌、凭据、身份证、入场券、房卡……)

1.1 是什么:

一个“令牌”(一串很长的字符串,由后端生成的),用来请求需要权限的接口时使用的。

有两个特点:

  • 它是由后端接口提供的

  • 一般在用户登陆时,由后端接口返回

1.2 保存token 

token很重要啊,现实生活中,比如打开某视频网站,发现不登录不让看1080p的电影,或者不登录,而你想看某个东西,直接弹窗告诉你,先登录!
正常情况,比如咱们登陆了,一般下次不用登陆了,这是因为保存了token。保存的方法主要有浏览器的本地存储localstorage。Cookie
上面说到,保存token最常见的是:1.本地存储 2.cookie 
  • 所有的组件都可以使用。   //    本地存储localstorage

  • 不是响应式的。

  • 刷新不会消失

而vuex 刷新会消失,但是是响应式的,所以他俩一结合,完美!  vuex+本地存储 (既保存在vuex中也保存到本地存储)

1.3.怎么用 

1.用户登录的时候,获取token                //   后台给        不带token的访问会导致401错误

2.保存token到本地                                                             //本地存储

3.发起其他请求,携带token        //一般可用vuex的actions发起ajax请求+调用mutation(commit)提交修改state ----mutation是唯一有权限可以修改操作state的

 2.axios拦截器

axios有一个请求拦截器机制,所有的axios请求在发出来之前都会经过 请求拦截器

格式:

// 请求拦截器
instance.interceptors.request.use(function (config) {
  console.log('config', config)
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})
实例:

// 请求拦截器1
instance.interceptors.request.use(function (config) {
  config.header.xxxx1 = 1000
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 请求拦截器2
instance.interceptors.request.use(function (config) {
  config.header.xxxx2 = 'abc'
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

 

所以,token可以方便的通过拦截器发送出去 

 

3.async(await) 【 Promise 对象、 Generator 函数】

3-1 先来说async

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员