Блог

В Angular мы определяем Route Guard как класс typescript, в который мы можем внедрить общий сервис

 @Injectable()
export class AppRouteGuard implements CanActivate, CanActivateChild {

    constructor(
        private _router: Router,
        private _sessionService: SessionService,
    ) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

        if (!this._sessionService.user) {
            this._router.navigate(['/account/login']);
            ...
  

В Vue Navigation Guard обычно представляет собой функцию, определенную следующим образом

 function guard(to, from, next) { ... }
  

В моем проекте я храню его в том же файле, что и маршруты.

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

Что мне нужно, так это разрешить общий сервис на уровне Navigation Guard и выполнить проверку, не является ли пользователь null (что означает, что они вошли в систему).

Это стало действительно сложно, я погуглил эту дилемму и нашел рекомендации по привязке сервиса к Vue.prototype например

 Vue.prototype.$sharedService = new SharedService();
  

Но тогда я не могу разрешить экземпляр на уровне Navigation Guard.

Каков правильный / оптимальный способ реализации идентичного поведения в Vue?