Отключить навигацию по изменению URL или прямой доступ к странице в Angular 7 без authguard?

Question

Здравствуйте, я ищу способ или предложения, что если пользователь изменит URL для доступа к другой странице, как это

, это ограничит пользователя и пользователя перенаправить на ту же страницу Есть ли способ обойтись без Authguard или без использования каких-либо модулей?

мой проект стекаблица, который не работает

Здесь

Answer 1

когда пользователь меняет свой URL вручную, ваше приложение будет выгружено и загружено снова. вы можете сделать несколько хаков с javascript, например, написать URL при выгрузке, а затем вернуть его обратно при загрузке

window.addEventListener('beforeunload', function(e) {
  localStorage.setItem("appUnloading", JSON.stringify({time: Date.now(), url: location.pathname}));
};
.....
export class GuardForAllRoutes {
  constructor(private router: Router) {}
  canActivate() {
    const appUnloadingState = localStorage.getItem("appUnloading");
    let time, url;
    if(appUnloadingState) {
      {time, url} = JSON.parse(appUnloadingState);
    }
     if(Date.now() - time < 10000) { //let say your page will be loaded for no more that 10 seconds
        return this.router.parse(url); // this won't work on old angular versions. use router.navigate instead
     }

  }
}

Answer 2

Вот хороший пример того, как это сделать https://medium.com/@ryanchenkie_40935 / angular -authentication-using-route-guards-bf7a4ca13ae3

Answer 3

Путь ** в последнем маршруте является подстановочным знаком. Маршрутизатор выберет этот маршрут, если запрошенный URL не совпадает ни с одним из путей для маршрутов, определенных ранее в конфигурации. Это полезно для отображения страницы «404 - Не найдено» или для перенаправления на другой маршрут.

app.module:

import { HelloComponent } from './hello.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const appRoutes: Routes = [
  { path: 'hello', component: HelloComponent },


  { path: '**', component: PageNotFoundComponent } <---
];
@NgModule({
  imports:      [ BrowserModule,RouterModule.forRoot(
      appRoutes,

    ), FormsModule ],
  declarations: [ AppComponent, HelloComponent, PageNotFoundComponent ],
  bootstrap:    [ AppComponent ]
})

https://stackblitz.com/edit/angular-ibrovt?file=src / app / app.module .ts

Надеюсь, это поможет!