javascript - 如何通过了解身份验证状态访问 protected 路由/禁用 Auth Guard

标签 javascript angular authentication angular-routing

情景 :
在这里,我正在构建一个应用程序,其中当前我有一个名为 products-info 的页面,其中一个 url 被发送给客户,点击链接,他可以直接打开该特定产品页面并查看信息,并且相同的页面将在那里在应用中。
问题 :
在这里,我正在使用 Auth 保护器保护路由,因此无需登录,用户就无法访问该页面。如果我通过电子邮件将相同的页面 url 发送给用户,他应该只能查看该页面。
所以我的应用程序有:

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

  • 通常,如果用户登录,此页面将可见,但是当管理员将 url 作为 mobiledot.com/products-info 发送到用户的电子邮件时,用户单击该 URL 并且应用程序不想登录并且它不想仅在该特定页面上显示任何注销或其他页面信息。下面是我的代码:
    路由器模块.ts
    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 { }
    
    认证 guard
    @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;
        }
    
    }
    
      
    
    所以我也想到了一些事情,比如用户是否登录到应用程序。我的路由器模块是:
    if(user loginin){     
          { path: 'main/:role', component: MainComponent, canActivate: [RouteGuard] },    
        }
         else {
              { path: 'main/:token', component: MainComponent }, 
              ex:  www.mobiledot.com/product-info?toke="ssdsdsdsdSDSD"
    }
    
    有可能还是我们有其他方法?
    简而言之,如果管理员通过电子邮件将受身份验证保护的应用程序中的相同页面 url 发送给用户,那么用户将单击链接并打开页面,它不应该要求登录。
    还有一个问题这是关于 localstorage 中存储的 token .所以在移动之前,我们是否必须清除该 token 并放置一个新 token ,以便它不会重定向到主页?

    最佳答案

    您的意思是注册用户应该可以看到产品信息,因为他们可以在他们的电子邮件中收到相应的链接,而他们可能是未经授权的(可能是 token 过期),因此您需要一个解决方案来覆盖它。
    首先,这是一种不好的做法token 那样透露某事作为 URL 参数。所以避免它。
    其次,请尽量采用正确的解决方案,而不是改变您应用中的基本行为。 AuthGuard旨在决定是否可以激活路由。它使用浏览器存储,如果 token 过期,您只能刷新它到期前 ,否则用户必须重新登录。
    我的解决方案正在创建类似票证 ID 的东西,可以附加到发送的链接(如 mobiledot.com/products-info/928f5f8b663571b7f3d829921c9079939c2d0319 )。您可以使其对用户一次性有效或多次有效。将其存储在数据库中并在用户使用时对其进行验证。这样,就不需要使用AuthGuard了只需控制服务器端的内容权限。

    关于javascript - 如何通过了解身份验证状态访问 protected 路由/禁用 Auth Guard,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62489780/

    相关文章:

    javascript - Angular 4 使用 typescript 解析响应数据

    angular - 无法从 App.Component 读取查询字符串参数

    angular - 使用主题和代理传递数据

    javascript - 如何在不与其他人使用react的情况下选择阻止单击的内容?

    javascript - 在哪里捕获 EVAL 中抛出的异常

    javascript - JS 链接函数

    python - 使用 ldap 配置文件在 django admin 中进行身份验证

    javascript - 一旦 MySql 获取了所有数据,如何停止我的滚动功能

    javascript - 我的 HTTP over AJAX 有什么问题 (javascript)

    php - 注册php文件