@connect
当我尝试在React组件中访问商店时,它的工作效果很好。但是我应该如何通过其他一些代码来访问它。例如:假设我想使用授权令牌创建可以在我的应用程序中全局使用的axios实例,那么实现这一目标的最佳方法是什么?
这是我的 api.js
// tooling modules
import axios from 'axios'
// configuration
const api = axios.create()
api.defaults.baseURL = 'http://localhost:5001/api/v1'
api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here
api.defaults.headers.post['Content-Type'] = 'application/json'
export default api
现在我想从我的商店访问一个数据点,这是如果我尝试使用以下方法在react组件中获取数据点的情况: @connect
// connect to store
@connect((store) => {
return {
auth: store.auth
}
})
export default class App extends Component {
componentWillMount() {
// this is how I would get it in my react component
console.log(this.props.auth.tokens.authorization_token)
}
render() {...}
}
有任何见解或工作流程模式吗?
api
in App
类,并在获得授权令牌后执行操作api.defaults.headers.common['Authorization'] = this.props.auth.tokens.authorization_token;
,同时也可以将其存储在localStorage中,因此,当用户刷新页面时,可以检查令牌是否存在于localStorage中以及是否存在确实可以设置。我认为最好在api模块上立即设置令牌。