在Angular 7中使用NGRX并将令牌保存在本地存储中,可以按照以下步骤进行:
首先,确保已经安装了必要的包:
npm install @ngrx/store @ngrx/effects --save
然后,在你的应用程序中创建一个TokenService来处理令牌的存储和获取:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TokenService {
private tokenKey = 'token';
getToken(): string | null {
return localStorage.getItem(this.tokenKey);
}
setToken(token: string): void {
localStorage.setItem(this.tokenKey, token);
}
removeToken(): void {
localStorage.removeItem(this.tokenKey);
}
}
接下来,创建一个auth.reducer.ts文件来定义你的认证状态和操作:
import { createReducer, on } from '@ngrx/store';
import { loginSuccess, logout } from './auth.actions';
export interface AuthState {
isAuthenticated: boolean;
token: string | null;
}
export const initialState: AuthState = {
isAuthenticated: false,
token: null
};
export const authReducer = createReducer(
initialState,
on(loginSuccess, (state, { token }) => ({
isAuthenticated: true,
token: token
})),
on(logout, state => ({
isAuthenticated: false,
token: null
}))
);
然后,在你的app.module.ts中设置NGRX Store和Effects:
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { authReducer } from './auth.reducer';
import { AuthEffects } from './auth.effects';
@NgModule({
imports: [
StoreModule.forRoot({ auth: authReducer }),
EffectsModule.forRoot([AuthEffects])
],
...
})
export class AppModule { }
接下来,创建一个auth.actions.ts文件来定义你的认证操作:
import { createAction, props } from '@ngrx/store';
export const loginSuccess = createAction(
'[Auth] Login Success',
props<{ token: string }>()
);
export const logout = createAction('[Auth] Logout');
然后,创建一个auth.effects.ts文件来监听登录成功和登出操作:
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { tap } from 'rxjs/operators';
import { TokenService } from './token.service';
import { loginSuccess, logout } from './auth.actions';
@Injectable()
export class AuthEffects {
constructor(
private actions$: Actions,
private tokenService: TokenService
) {}
loginSuccess$ = createEffect(
() =>
this.actions$.pipe(
ofType(loginSuccess),
tap(action => {
this.tokenService.setToken(action.token);
})
),
{ dispatch: false }
);
logout$ = createEffect(
() =>
this.actions$.pipe(
ofType(logout),
tap(() => {
this.tokenService.removeToken();
})
),
{ dispatch: false }
);
}
最后,在你的登录组件中使用Store和Dispatch来处理登录操作:
import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { loginSuccess } from './auth.actions';
@Component({
selector: 'app-login',
template: `...`
})
export class LoginComponent {
constructor(private store: Store) {}
login(): void {
// 调用登录API获取令牌
const token = 'your_token';
this.store.dispatch(loginSuccess({ token }));
}
}
这样,你就可以使用NGRX来管理认证状态,并将令牌保存在本地存储中了。