用户成功登录以后,服务端会给用户签发一个令牌,这样客户端应用以后再次请求服务端的时候就需要在请求的头部里包含这个令牌的值。这样服务端就可以通过这个令牌判断当前发送这个请求的用户是谁了。
我们在 useFetch 里可以添加一个请求拦截器,然后在里面设置一下请求头部。打开 useApiFetch,先在这里声明一个 currentUser,用一下 useState,状态的名字叫 currentUser。类型参数设置成 CurrentUser。
然后在这个 useFetch 的选项参数里面添加一个请求拦截器,名字叫 onRequest,它是一个异步函数,用 async 标记一下。这个函数有个 context 参数,判断一下 currentUser.value ,如果有值,可以设置一下 context.options.headers,它是一个对象,对象里添加一个 Authorization ,对应的值是 Bearer 空格,然后再加上 currentUser.value.token 的值。
下面可以在浏览器上测试一下,当前是登录状态,所以 currentUser 会有值,打开内容列表页面,再打开网络这个选项卡,过滤出 Fetch/XHR。
然后点击 下一页,选中这个请求,观察一下这个请求的标头,你会发现在这个请求的头部里面会包含一个名字叫 Authorization 的头部,它的值是 Bearer 空格,后面是登录成功的时候服务端给当前这个用户签发的令牌。