axios请求拦截器与携带token
ajax异步请求,axios请求拦截器与携带token的步骤
·
项目需求:需要授权的 API ,必须在请求头中使用 Authorization
字段提供 token
令牌
1.引入axios
import axios from 'axios'
2.为axios设置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
3.将token令牌保存到浏览器的sessionStorage中
示例:
// 1.将登录成功之后的token,保存到客户端的sessionStorage中
// 1.1 项目中除了登录之外的其他API接口,必须在登录之后才能访问
// 1.2 token只应在当前网站打开期间生效,所以将token保存在sessionStorage中
// localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
// sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
window.sessionStorage.setItem('token', res.data.token)
//将res.data.token赋值给sessionStorage中的token
// 2.通过编程式导航跳转到后台主页,路由地址是 /home
this.$router.push('/home')
4. 设置axios请求拦截器
目的是让每次发起ajax异步请求之前对axios进行一次预处理,将token令牌赋予axios
// axios请求拦截器 => interceptors 在页面发送请求前进行一次预处理
axios.interceptors.request.use(config => {
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在发起axios请求前自动进行预处理,追加一个token,以便于访问需要权限的页面
// 为请求头对象(headers)中添加token验证的自定义字段(Authorization)
// 作用是为了让需要验证才能使用的API能够使用(请求头中携带了token值则可通过验证)
// 在最后必须return config
return config
})
更多推荐
已为社区贡献2条内容
所有评论(0)