关于Ajax在获取数据时遇到的JWT身份认证问题

利用JWT控制页面的访问权限

在前后端分离模式的开发中，服务器如何知道来访者的身份呢？

在登录后，服务器会响应给用户一个令牌（token）
令牌中会包括该用户的id等唯一标识
浏览器收到令牌后，自己保存
下次请求其他接口时，（在请求头中）携带这个令牌去请求
这样服务器就知道来访者的身份了，服务器就会为该用户开发接口的访问权限，并处理该用户的数据

如何把后端传给前端的JWT中的token放在ajax请求头中

Authentication：未登录的时候调用需要登录的接口，一般使用 401 Unauthorized。

1.全局配置请求头

//全局ajax的默认值
//修改token（AUTH_TOKEN;）即可给全局ajax发送的时候配置token
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//例如
axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');

2.给单个ajax在请求服务器时设置请求头

axios({
 //在请求头中有一个headers对象,Authorization是headers对象里面的一个属性名，
 //服务器会通过这个属性名,读取toten,
 headers:{ Authorization:localStorage.getItem('') }
 url: 'url',
 method:'get'
    })
  .then(res => console.log(res))

3.给除了注册登录以外的ajax在请求服务器获取数据时设置请求头

（利用axios拦截器设置请求头）

 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 //查看ajax发送的数据
 config.headers.Authorization='toten'
 // console.dir(config.headers)
    return config;
  }, function (error) {
 // 对请求错误做些什么
    return Promise.reject(error);
 });

0 条评论