Две разные вкладки используют один и тот же сеанс в angular

У меня страничка угловатая. В котором роль передается как строка запроса и в зависимости от роли, которую я отображаю на странице. Роль, которую я храню в localStorage.

1. Логин сотрудника, роль в localStorage установлена ​​на сотрудника
2. Логин менеджера, роль в localStorage установлена ​​на manager

Теперь проблема заключается в том, что пользователь входит в систему как роль (менеджер и сотрудник) на разных вкладках одного и того же браузера. то есть сначала пользователь войдет в систему как менеджер, а затем тот же пользователь войдет в систему как сотрудник в том же браузере, но на разных вкладках. поскольку я использую тот же ключ localStorage, который является «ролью», когда пользователь входит как менеджер, роль обновляется до менеджера, а в другой вкладке пользователь входит в систему как сотрудник, роль обновляется до сотрудника. Затем, если пользователь переходит на вкладку менеджера и обновляет страницу, он принимает последнюю роль из «роли» локального хранилища, а отображаемая страница принадлежит сотруднику.

вот мой код:

    if (params['role'] == "manager") {
        localStorage.setItem('role', params['role']);
    }else{
        localStorage.setItem('role',params['role]);
    }

Я хочу, чтобы страница имела ту же роль после обновления, даже если открыто несколько вкладок с разными ролями. Пожалуйста, помогите мне решить эту проблему ... Заранее спасибо.