我正在使用一个基本的 Angular 11 应用程序,该应用程序已实现身份验证(使用 AWS Cognito 和 Amplify)。我在这里想做的事情非常简单。我正在使用内置的 AWS Amplify 方法进行身份验证。我正在使用 NGXS 来存储与身份验证相关的项目,例如令牌、用户信息等。
import { State, Action, StateContext, Selector } from '@ngxs/store';
import { AuthStateModel, defaultAuthState } from './auth.model';
import {
LoginAction,
AuthenticationCheckAction,
LogoutAction,
} from './auth.actions';
import { Auth } from 'aws-amplify';
import { environment } from 'src/environments/environment';
import { Injectable } from '@angular/core';
import { updateItem } from '@ngxs/store/operators';
@State<AuthStateModel>({
name: 'authState',
defaults: defaultAuthState,
})
@Injectable()
export class AuthState {
cognitoClientId = environment.cognitoClientId;
cognitoCallbackURL = environment.cognitoCallbackURL;
cognitoDomainName = environment.cognitoDomainName;
loginurl = `https://${this.cognitoDomainName}/login?response_type=code&client_id=${this.cognitoClientId}&redirect_uri=${this.cognitoCallbackURL}`;
@Selector()
static getIsLoggedIn(state: AuthStateModel) {
console.log('from getIsLoggedIn selector =>', state);
return state.isLoggedIn;
}
@Action(LoginAction)
login() {
window.location.assign(this.loginurl);
}
@Action(AuthenticationCheckAction)
checkLogin({ getState, patchState }: StateContext<AuthStateModel>) {
const state = getState();
Auth.currentAuthenticatedUser()
.then((currentUser) => {
const isLoggedIn = true;
const username = currentUser?.attributes?.name;
patchState({
currentUser,
isLoggedIn,
username,
});
})
.catch((err) => console.log(err));
return;
}
@Action(LogoutAction)
logout({ patchState }: StateContext<AuthStateModel>) {
Auth.signOut()
.then((data) => {
console.log(data);
patchState(defaultAuthState);
})
.catch((err) => console.log(err));
return;
}
}
一切正常,除了当它命中 checkLogin 函数内的 patchState 方法时,它会在浏览器控制台中抛出以下错误:-
TypeError: Cannot freeze
at Function.freeze (<anonymous>)
at deepFreeze (ngxs-store.js:1869)
at ngxs-store.js:1884
at Array.forEach (<anonymous>)
at deepFreeze (ngxs-store.js:1874)
at ngxs-store.js:1884
at Array.forEach (<anonymous>)
at deepFreeze (ngxs-store.js:1874)
at ngxs-store.js:1884
at Array.forEach (<anonymous>)
奇怪的是,如果我注释掉以下内容,错误就会消失currentUser
来自 pathState() 方法。所以问题出在状态内部对象的更新上。
ngxs-store.js 文件的此错误中引用的行包含以下代码。 1869 处的行是开头的 Object.freeze(o) 行:-
const deepFreeze = (/**
* @param {?} o
* @return {?}
*/
(o) => {
Object.freeze(o);
/** @type {?} */
const oIsFunction = typeof o === 'function';
/** @type {?} */
const hasOwnProp = Object.prototype.hasOwnProperty;
Object.getOwnPropertyNames(o).forEach((/**
* @param {?} prop
* @return {?}
*/
function (prop) {
if (hasOwnProp.call(o, prop) &&
(oIsFunction ? prop !== 'caller' && prop !== 'callee' && prop !== 'arguments' : true) &&
o[prop] !== null &&
(typeof o[prop] === 'object' || typeof o[prop] === 'function') &&
!Object.isFrozen(o[prop])) {
deepFreeze(o[prop]);
}
}));
return o;
});
不够精明,无法理解这里发生了什么。这是修补状态的简单尝试。状态模型如下:-
export class AuthStateModel {
isLoggedIn: Boolean;
currentUser: Object;
username: String;
}
export const defaultAuthState: AuthStateModel = {
isLoggedIn: false,
currentUser: {},
username: '',
};
我能做些什么来让它正常工作吗?