关于request的代码逻辑

1.  封装请求基地址

1. 在src目录下新建一个api文件夹，此文件夹专门写请求相关的文件夹
2. 然后在里面新建一个use.js，此文件夹专门放用户请求的
3. 用axios发送请求
4. 在use.js文件夹里导入request
5. 根据接口文档 写请求
6. 然后把这个请求封装成一个函数，这个函数里需要传入两个参数
7. 这两个参数 都放在data数据里 所以可以直接申明需要的数据是data
8. 在api目录下创建index.js
9. 引入user.js并把接口暴露出去

 2. 添加请求拦截器并设置请求头

作用 :经过对接口文档的阅读发现后面要调用接口几乎都要携带token，如果每次封装接口函数都手动写headers加token很麻烦，所以可以用请求拦截器把所有的请求拦截下来，再自动添加token即可解决

代码

// 请求拦截器
request.interceptors.request.use((config) => {
    // Do something before request is sent
    // 在我们发送请求前做的事情
 
    // 判断发送的请求需不需要请求头
    if (store.state.tokenObj.token) {
        // 统一在请求头中携带token
        config.headers.Authorization = 'Bearer ' + store.state.tokenObj.token
    }
    return config
}, (error) => {
    // Do something with request error
    // 请求失败
    return Promise.reject(error)
})

 

 3. 添加响应拦截器，以及token过期问题

• 响应拦截器的作用

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；

在我们这个项目里是解决token过期的问题，以及无token访问重新回退到登陆页面

 

【拦截器拦截失败信息】

因为token过期， 所以第二次请求失败 ，那要代码继续运行下去， 就放上一个响应拦截器 把这个错误拦截， 并且不return出去 这样浏览器就不知道有这个错误。

 5. 无感刷新

为什么要采取无感刷新?

为了保证安全性，后端设置的Token不可能长期有效，过了一段时间Token就会失效。而发送网络请求的过程又是需要携带Token的，一旦Token失效，用户就要重新登陆，这样用户可能需要频繁登录，体验不好。为了解决这个问题，采取无感刷新，用户完全体会不到Token的变化，但实际上，Token已经刷新了。

6. refresh_token过期处理

refresh_token早晚有一天也会过期，那么利用它还能刷新到token吗？不能

事实上token一般14天就会过期

解决思路

如果连refresh_token都过期了，那就应该让用户重新登录

       try{
        //发送请求,获取refresh_token
        let res = await axios({
            url: 'http://geek.itheima.net/v1_0/authorizations',
            method: 'put',
            //请求头
            headers: {
                Authorization: 'Bearer ' + store.state.tokenObj.refres_token
            }
        })
        //调用store里的changeToken方法,修改初始token
        store.commit('changeToken', {
            // 使用第三次请求中打的到的新的token替换原本的token
            token: res.data.data.token,
            // refres_token依然是原本的值
            refres_token: store.state.tokenObj.refres_token
        })
        // 这个时候把获取用户信息这个请求再发了一次
        // 在请求拦截器中,拦截器return什么,浏览器就拿到什么
        return request(error.config)
        // console.log('第三次请求获取到的内容', res);
    }catch{
        Toast.fail('登录状态失败,重新登陆')
        // 返回登录页
        router.push('./login')
    }

步骤：

把 refresh_token 发的请求try一下，能进到catch里就证明refresh_token也有问题了，就打回登录页