我有一个react/redux应用程序,它从api服务器获取令牌。在用户进行身份验证后,我希望所有axios请求都将该令牌作为授权头,而不必手动将其附加到操作中的每个请求。我对react/redux相当陌生,不确定最佳方法,也没有在google上找到任何高质量的点击
以下是我的redux设置:
//actions.js
从“axios”导入axios;
导出函数登录用户(道具){
常量url=`https://api.mydomain.com/login/`;
const{email,password}=props;
const request=axios.post(url,{email,password});
返回{
类型:登录用户,
有效载荷:请求
};
}
导出函数fetchPages(){
/*在这里,如果用户
已登录*/
const request=axios.get(PAGES\u URL);
返回{
类型:获取页面,
有效载荷:请求
};
}
//reducers.js
常量初始状态={
I认证:错误,
令牌:空
};
导出默认值(状态=初始状态,操作)=>;{
开关(动作类型){
案例登录用户:
//我认为应该在这里将头附加到所有axios请求。
返回{
令牌:action.payload.data.key,
我被证实:是的
};
案例注销用户:
//在这里,我将从所有axios请求中删除头。
返回初始状态;
违约:
返回状态;
}
}
我的令牌存储在redux存储中的状态.session.token下
我对如何进行有点迷茫。我尝试在根目录中的文件中创建一个axios实例,并更新/导入该实例,而不是从node_模块中进行更新/导入,但当状态发生变化时,它不会附加头。非常感谢您的反馈/想法,谢谢
实现这一点有多种方法。在这里,我解释了两种最常见的方法
一,。您可以使用axios拦截器拦截任何请求并添加授权标头
//添加请求拦截器
axios.interceptors.request.use(函数(配置){
const token=store.getState().session.token;
config.headers.Authorization=令牌;
返回配置;
});
二,。从axios的文档中可以看到,有一种机制可用于设置默认标头,该标头将随您发出的每个请求一起发送
axios.defaults.headers.common['Authorization']=AUTH_令牌;
因此,在你的情况下:
axios.defaults.headers.common['Authorization']=store.getState().session.token;
如果需要,可以创建一个自执行函数,该函数将在存储中存在令牌时设置授权头本身
(函数(){
字符串令牌=store.getState().session.token;
如果(令牌){
axios.defaults.headers.common['Authorization']=token;
}否则{
axios.defaults.headers.common['Authorization']=null;
/*如果设置null不能删除'Authorization'头,请重试
删除axios.defaults.headers.common['Authorization'];
*/
}
})();
现在,您不再需要手动将令牌附加到每个请求。您可以将上述函数放在保证每次执行的文件中(例如:包含路由的文件)
希望有帮助:)