角度ngrx-store-local存储在重新加载后不存储数据 [英] angular ngrx-store-localstorage don't stored data after reload
本文介绍了角度ngrx-store-local存储在重新加载后不存储数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用ngrx-store-local存储跨浏览器会话存储令牌来将ngrx集成到我的身份验证过程中。
当我登录时,我可以在如下所示的存储中看到令牌的值
{"token":{"token":"e5cb6515-149c-44df-88d1-4ff16ff4169b","expiresIn":10385,"expiresAt":1512082478397},"authenticated":true,"error":false}
但例如,当我编辑页面并重新加载应用程序时
{"token":null,"authenticated":false,"error":false}
代码操作
import { Action } from '@ngrx/store';
import { AuthenticationTokenInterface } from '../authentication.interface';
export const LOGIN = 'LOGIN';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAILED = 'LOGIN_FAILED';
export const LOGOUT = 'LOGOUT';
export const SET_TOKEN = 'SET_TOKEN';
export class Login implements Action {
readonly type = LOGIN;
constructor(public payload: {username: 'string',password: 'string'}) {}
}
export class LoginSuccess implements Action {
readonly type = LOGIN_SUCCESS;
}
export class LoginFailed implements Action {
readonly type = LOGIN_FAILED;
}
export class Logout implements Action {
readonly type = LOGOUT;
}
export class SetToken implements Action {
readonly type = SET_TOKEN;
constructor(public payload: AuthenticationTokenInterface) {}
}
export type AuthenticationActions = Login | LoginSuccess | LoginFailed | Logout | SetToken;
效果
@Injectable()
export class AuthenticationEffects {
@Effect()
login$ = this.actions$.ofType(AuthenticationActions.LOGIN)
.pipe(
mergeMap((action: AuthenticationActions.Login) => {
return this.authenticationService.login(action.payload)
.pipe(
mergeMap((token:AuthenticationTokenInterface) => {
this.router.navigate(['/main/dashboard']);
return [
{ type: AuthenticationActions.LOGIN_SUCCESS },
{ type: AuthenticationActions.SET_TOKEN, payload: token }
]
}),
catchError(() => {
return of({ type: AuthenticationActions.LOGIN_FAILED })
})
)
})
);
@Effect({dispatch: false})
logout$ = this.actions$.ofType(AuthenticationActions.LOGOUT)
.pipe(
switchMap(()=>{
this.router.navigate(['/logout']);
return this.authenticationService.logout();
})
);
constructor(
private actions$: Actions,
private router: Router,
private authenticationService: AuthenticationService
) {}
}
减速机
export interface State {
token: AuthenticationTokenInterface;
authenticated: boolean;
error: boolean;
}
const initialState: State = {
token: null,
authenticated: false,
error: false
};
export function authenticationReducer(
state = initialState,
action: AuthenticationActions.AuthenticationActions
):State {
switch (action.type) {
case (AuthenticationActions.LOGIN_SUCCESS):
return {
...state,
authenticated: true,
};
case (AuthenticationActions.LOGIN_FAILED):
return {
...state,
error: true
};
case (AuthenticationActions.LOGOUT):
return {
...state,
token: null,
authenticated: false
};
case (AuthenticationActions.SET_TOKEN):
return {
...state,
token: action.payload
};
default:
return state;
}
}
减速机(应用程序)
export interface AppState {
authentication: fromAuthentication.State
}
export const reducers: ActionReducerMap<AppState> = {
authentication: fromAuthentication.authenticationReducer
};
应用程序模块
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync({keys: ['authentication']})(reducer);
}
const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];
imports: [
StoreModule.forRoot(
reducers,
{metaReducers}
),
EffectsModule.forRoot([AuthenticationEffects]),
]
推荐答案
您需要将rehydrate
键添加到本地StorageSync函数调用中。
export function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
return localStorageSync(
{keys: ['authentication'],
rehydrate: true})(reducer);
}
详情请参见:https://github.com/btroncone/ngrx-store-localstorage/blob/master/README.md。
这篇关于角度ngrx-store-local存储在重新加载后不存储数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文