目前在创建路由时,我会检查一个名为 isAuthenticated() 的 Auth0 方法来确定是否返回受保护的页面或重定向到登录页面。然而,这个状态只存在于内存中,不能在浏览器刷新后让用户停留在他们的页面上,我想实现这一点。
这是一个 React/RR4/React Context 应用程序,我的 Auth0 方法列在 Auth.js 中(如下所示)。
将登录状态存储在 localStorage 中是极不建议的。如果我将我的 Auth0 令牌存储在 cookie 中,我不确定如何验证令牌,因为没有设置服务器验证。什么是正确的条件来检查,以实现安全的数据持久性?
ProtectedRoutes.jsx:
<Route
exact
key={route.path}
path={route.path}
render={() => (
// CONDITION TO CHECK
context.auth.isAuthenticated()
? (
<div>
<route.component />
</div>
) : <Redirect to="/login" />
)}
/>
Auth.js(参考内容):
import auth0 from 'auth0-js';
import authConfig from './auth0-variables';
class Auth {
accessToken;
idToken;
expiresAt;
tokenRenewalTimeout;
auth0 = new auth0.WebAuth({
domain: authConfig.domain,
clientID: authConfig.clientId,
redirectUri: authConfig.callbackUrl,
responseType: 'token id_token',
scope: 'openid'
});
constructor() {
this.scheduleRenewal();
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.handleAuthentication = this.handleAuthentication.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
this.getAccessToken = this.getAccessToken.bind(this);
this.getIdToken = this.getIdToken.bind(this);
this.renewSession = this.renewSession.bind(this);
this.scheduleRenewal = this.scheduleRenewal.bind(this);
}
login() {
console.log('logging in!');
this.auth0.authorize();
}
handleAuthentication() {
return new Promise((resolve, reject) => {
this.auth0.parseHash((err, authResult) => {
if (err) return reject(err);
console.log(authResult);
if (!authResult || !authResult.idToken) {
return reject(err);
}
this.setSession(authResult);
resolve();
});
});
}
getAccessToken() {
return this.accessToken;
}
getIdToken() {
return this.idToken;
}
getExpiration() {
return new Date(this.expiresAt);
}
isAuthenticated() {
let expiresAt = this.expiresAt;
return new Date().getTime() < expiresAt;
}
setSession(authResult) {
localStorage.setItem('isLoggedIn', 'true');
let expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.accessToken = authResult.accessToken;
this.idToken = authResult.idToken;
this.expiresAt = expiresAt;
this.scheduleRenewal();
}
renewSession() {
this.auth0.checkSession({}, (err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
} else if (err) {
this.logout();
console.log(`Could not get a new token. (${err.error}: ${err.error_description})`);
}
});
}
scheduleRenewal() {
let expiresAt = this.expiresAt;
const timeout = expiresAt - Date.now();
if (timeout > 0) {
this.tokenRenewalTimeout = setTimeout(() => {
this.renewSession();
}, timeout);
}
}
logout() {
this.accessToken = null;
this.idToken = null;
this.expiresAt = 0;
localStorage.removeItem('isLoggedIn');
clearTimeout(this.tokenRenewalTimeout);
console.log('logged out!');
}
}
export default Auth;