Question

我有一个登录组件，在成功验证后会将用户重定向到仪表板页面。

// save user in local storage
localStorage.setItem('authenticatedUser', JSON.stringify(rs.data));
this.router.navigate(['dashboard/dashboard-home']);

在仪表板组件中，我尝试从本地存储中为用户拍照，如下所示：

ngOnInit() {
    this._authenticatedUser = JSON.parse(localStorage.getItem('authenticatedUser'));
}

问题是，当用户被重定向到页面时，this._authenticatedUser最初没有填充，但是当用户刷新页面时，信息就在那里。

NGREDUX解决方案 我已经做了一些阅读，像redux这样的解决方案是一种更好的强大方法，但是我没有其他方法可以立即在Angular中即时共享对象吗？

Answer 1

您可以创建一个包含用户变量的服务，而不是使用localStorage。然后，您的用户变量将始终位于缓存中，并可从注入服务的任何组件访问。以下是您的工作方式：

@Injectable()
export class AuthenticationService {
    private _authenticatedUser: User;

    constructor(public router: Router) { }


    set user(data) {
        this._authenticatedUser = data
    }

    get user() {
        return this._authenticatedUser;
    }


    login(username, password) {
        // your authentication code
        this.authenticatedUser = rs.data
        this.router.navigate(['dashboard/dashboard-home']);
    } 

}

然后，在仪表板组件中：

import { AuthenticationService } from 'wherever_its_located'

@Component
export class Dashboard implements OnInit {
    private _authenticatedUser;

    constructor(private auth: AuthenticationService) {}

    ngOnInit() {
        this.__authenticatedUser = auth.authenticatedUser;
    }
}

我错过了一些进口商品和一些小商品，但这是个主意。

直到我在Angular中手动重新加载页面时才检测到LocalStorage变量

1 个答案: