我在ReactJS RelayJS网络环境中使用JWT身份验证。服务器和客户端中的所有令牌检索和处理都很好。我正在使用React Router v4进行路由。
我的问题是,当我从服务器收到一条Unauthorized
消息时(状态码401)。如果用户在令牌过期(即)后指向应用程序页面,则会发生这种情况。我需要做的是重定向到登录页面。这是我希望可以拥有的代码:
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
const SERVER = 'http://localhost:3000/graphql';
const source = new RecordSource();
const store = new Store(source);
function fetchQuery(operation, variables, cacheConfig, uploadables) {
const token = localStorage.getItem('jwtToken');
return fetch(SERVER, {
method: 'POST',
headers: {
Authorization: 'Bearer ' + token,
Accept: 'application/json',
'Content-type': 'application/json'
},
body: JSON.stringify({
query: operation.text, // GraphQL text from input
variables
})
})
.then(response => {
// If not authorized, then move to default route
if (response.status === 401)
this.props.history.push('/login') <<=== THIS IS NOT POSSIBLE AS THERE IS NO this.history.push CONTEXT AT THIS POINT
else return response.json();
})
.catch(error => {
throw new Error(
'(environment): Error while fetching server data. Error: ' + error
);
});
}
const network = Network.create(fetchQuery);
const handlerProvider = null;
const environment = new Environment({
handlerProvider, // Can omit.
network,
store
});
export default environment;
自然不可能调用
this.props.history.push
,因为网络环境不是ReactJS组件,因此没有关联的属性。我已经尝试在此时抛出错误,例如:
if (response.status === 401)
throw new Error('Unauthorized');
但是我在浏览器控制台上看到该错误,因此无法在代码中正确处理。
我要做的就是在收到401错误的情况下重定向到登录页面,但是我找不到正确的方法。
最佳答案
我不是在使用中继,而是在使用渲染道具。我遇到了同样的问题。我能够使用window对象解决它。
if (response.statusText === "Unauthorized") {
window.location = `${window.location.protocol}//${window.location.host}/login`;
} else {
return response.json();
}