Question

场景：在这里，我正在构建一个应用程序，其中当前有一个名为 products-info 的页面，其中向客户发送了一个url，单击链接后，他可以直接打开该特定产品页面并查看信息并在应用程序中有相同的页面。

问题：在这里，我使用Auth防护来保护路由，因此如果没有登录，用户将无法访问该页面。如果我通过电子邮件向用户发送了相同的页面网址，则他应该只能查看该页面。

所以我的应用程序有：

登录页面
产品页面
产品信息页面

通常，如果用户登录，则可以看到此页面，但是当管理员将 mobiledot.com/products-info 的网址发送给用户的电子邮件时，用户点击该链接而应用程序则不会要登录，并且不希望仅在该特定页面上显示任何注销或其他页面信息。下面是我的代码：

router.module.ts

# vagrant plugin install vagrant-vbguest 
# vagrant halt
# vagrant up
# vagrant halt
# vagrant up

身份验证防护

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'main/:role', component: MainComponent, canActivate: [RouteGuard] },
  { path: 'admin', component: AdminComponent},
  { path: 'user', component: userComponent,canActivate: [RouteGuard]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [RouteGuard]
})
export class AppRoutingModule { }

因此，我还考虑了一些类似用户登录应用程序的问题。我的路由器模块是：

@Injectable()
export class RouteGuard implements CanActivate {

    constructor(private service: accessService, private router: Router) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
        const isAllowed = this.service.getAuthenticated();
        if (!isAllowed) {
            this.router.navigate(['/']);
        }
        return isAllowed;
    }

}

有可能还是我们有其他方法？

简而言之，如果管理员通过电子邮件向用户发送了受身份验证卫队保护的应用程序中相同的页面URL，则用户将单击链接并打开页面，并且不应要求登录。

还有另一个问题，该问题与if(user loginin){ { path: 'main/:role', component: MainComponent, canActivate: [RouteGuard] }, } else { { path: 'main/:token', component: MainComponent }, ex: www.mobiledot.com/product-info?toke="ssdsdsdsdSDSD" }中存储的令牌有关。因此在移动之前，我们是否必须清除该令牌并放置一个新令牌，以使其不会重定向到主页？

Answer 1

您的意思是 products-info 对于注册用户应该是可见的，因为他们可以在未经授权的情况下（可能是由于令牌过期）在电子邮件中接收相应的链接，因此您需要一种解决方案盖上它。

首先，这是一个不好的做法，无法将诸如token之类的东西显示为Url参数。所以避免它。

第二，请尝试采用正确的解决方案，而不要更改应用程序中的基本行为。 AuthGuard旨在确定路由是否可以激活。它使用浏览器存储，并且在令牌到期的情况下，您只能在到期之前刷新它，否则用户必须再次登录。

我的解决方案正在创建类似票证ID的事物，可以将其附加到已发送的链接中（例如mobiledot.com/products-info/928f5f8b663571b7f3d829921c9079939c2d0319）。您可以使它一次有效或对用户更有效。将其存储在数据库中，并在用户使用时对其进行验证。这样，就无需使用AuthGuard来控制服务器端的内容许可。

Answer 2

由于您具有路由守卫，因此需要一种情况，即使您未登录，它也应该返回true。

因此，只需使用您想到的 www.mobiledot.com/product-info?toke="ssdsdsdsdSDSD" 方法即可。

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
// check if there is a query param , like token in the url  and url is your without token one. 
           if(queryParamToken && urlpath === 'view'){
// as you have token hit the api to check if required to check token is a valid one.
or can simply return true as per your need / requirement


 -- checkout this link if you need referece
         } else {

            const isAllowed = this.service.getAuthenticated();
            if (!isAllowed) {
                this.router.navigate(['/']);
            }
            return isAllowed;
  }
        }

Verify token with API in Angular8 canActivate method of AuthGuard-如果需要参考，请签出此链接

如何通过了解身份验证状态访问受保护的路由/禁用身份验证防护

2 个答案: