如何在angular4中保护路线答案

【问题标题】：How to protect route in angular4如何在angular4中保护路线
【发布时间】：2018-02-13 21:52:07
【问题描述】：

我的应用程序中有登录/创建帐户。如果用户已经登录，我希望用户将无法看到登录/创建帐户。我正在使用 Authguard 来保护路由：

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;
        if (localStorage.getItem('UserLoggedIn')) {
            // logged in so return true
            this.router.navigate(['']);
            return true;
        }

        // not logged in so redirect to login page with the return url
         this.router.navigate(['login']);
         return false;
    }

在这种情况下，页面将进入无限循环。

这是我的路线：

const appRoutes: Routes = [
  { path: '', component: HomeComponent , data: { animation: '' }},
  { path: 'login', component: UserloginComponent , data: { animation: 'login' },canActivate:[AuthGuard]},
  { path: 'create-account', component: CreateAccountComponent, data: { animation: 'create-account' } },
  { path: 'forgot-password', component: ForgotPasswordComponent, data: { animation: 'forgot-password' } },
  { path: '**', component: PageNotfoundComponent }
];

请帮忙。我想要它用于登录和创建帐户。

【问题讨论】：

标签： javascript angular angular-routing angular-router-guards

【解决方案1】：

这是因为您将 this.router.navigate(['login']); 添加到您的 authguard 并且此 authguard 已附加到 login 路由。每次访问路线时，它总是调用所有附加的警卫。因此，在您的情况下，如果您访问登录名，它将无限重定向到登录名。有很多方法可以解决您的问题。如果您打算在登录路由上添加保护，只需删除 this.router.navigate(['login']); 以避免无限循环。但我建议仅在用户未登录的情况下将保护添加到您想要保护被访问的那些路由。

【讨论】：

如果我没有在路由上添加保护，那么它将转到该组件，然后检查用户是否已登录，如果已登录，然后重定向回主页。这是保护页面的好方法吗？
你应该做相反的事情。保护所有安全路线（所有路线只有在登录后才能访问），如果未登录，则将它们重定向到登录页面。
如果用户登录并在 URL 中输入登录页面 url，那么该页面上没有保护，用户将在该页面上重定向。当用户登录时，页面仍然可以访问。是不是错了。所以我担心的是，如果用户已经登录，那么他们将无法访问登录页面或再次创建帐户页面。
您可以为此创建一个单独的守卫。或者另一种方法是使用您现有的守卫并在不等于登录时触发重定向到登录路由。即this.router.url !== '/login'

【解决方案2】：

试试这个：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {debugger;

        let redirect: boolean = false;

        if (localStorage.getItem('UserLoggedIn')) {
            // logged in so return true
            this.router.navigate(['']);
            redirect = true;
        } else {
            // not logged in so redirect to login page with the return url
            this.router.navigate(['login']);
            redirect =  false;
        }


        return redirect;

    }

【讨论】：

它也像我的代码一样工作。在这种情况下，页面也会进入无限循环。