角度2:阻止URL上的GET请求 [英] Angular 2: Block GET request on a URL

问题描述

我的URL为 http://www.localhost:4200/profile 和 http://www.localhost:4200/editProfile .这两个URL均提供给已登录的用户.现在，我只希望通过导航菜单提供对/editProfile 的可访问性，而不是直接在地址栏上写入URL并按Enter.如果用户这样做，他将被重定向到/profile 路径.

I have URLs as http://www.localhost:4200/profile and http://www.localhost:4200/editProfile. Both URLs are served to a logged in user. Now I want the accessibility of /editProfile only through the navigation menu available and not by directly writing the URL on address bar and pressing enter. If the user does so, he is redirected to /profile path.

类似于允许在/editProfile 上执行POST，但不执行GET的操作.

Something similar to allowing POST on /editProfile but no GET.

能否使用路由模块中提供的CanActivate来实现?

Can it be achieved using CanActivate available at the routes module?

谢谢

推荐答案

提交.我之所以问您，是因为我解决该问题的方法不是通过阻止用户通过地址栏进行导航.这样做会对应该对该页面具有合法访问权限的用户造成麻烦.如果用户已经登录，为什么不允许她直接访问编辑个人资料页面?当用户尝试在浏览器中使用前进和后退导航按钮时，它也会使事情中断，并给我带来非常令人沮丧的体验.

Sumit. I asked you for the purpose because the way I solve that problem is not by preventing user from navigating via the address bar. Doing so will break things for users who should have legitimate access to that page. If a user is logged in already, why should she not be allowed to directly access edit profile page? It will also break things when the user tries to use forward and back navigation buttons in her browser and will make for a very frustrating experience I think.

如果您仍然想做...

If you still want to do it...

您可以在路线定义中使用 CanActivate

You can use CanActivate in your route definition

path: 'editProfile',
component: EditProfileComponent,
canActivate:[EditProfileGuard]

EditProfileGuard 是一项仅在标志设置为true时才允许导航的服务

EditProfileGuard is a service that will allow navigation only if a flag is set to true

@Injectable()
export class EditProfileGuard implements CanActivate {

    //must be set to true for navigation to succeed
    allow = false;

    canActivate(){
        if(this.allow){
            this.allow = false;
            return true;
        }
        else return false;
    }
}

如果用户通过浏览器地址栏导航，则由于 allow 为假，她将被拒绝访问.

If the user navigates via browser address bar, she will be denied access because allow is false.

当用户单击导航菜单中的链接时，将 allow 设置为true，然后再将其发送到新路线

When user clicks a link in your nav menu, set allow to true before you send her to the new route

import {EditProfileGuard} from '...'
import {Router} from '@angular/router';
...
export class MyComponent{

    constructor(private guard:EditProfileGuard, private router:Router){}

    //execute this when link is clicked
    goToProfile(){
        //so navigation will be allowed
        this.guard.allow = true; 
        this.router.navigateByUrl('editProfile');
    }
}

请记住将服务添加到您的 AppModule 的 providers 数组中.

Remember to add the service to the providers array of your AppModule.

针对您在下面的评论

我会将 checkoutID 设为摘要页面的必需参数，因此路由定义将为/summary/:id 到checkout页面的链接(或用户保存的网址)将具有 id ，并且摘要组件可以使用该 id 来检索和显示详细信息.

I would make a checkoutID a required parameter to the summary page, so the route definition would be /summary/:id The link to the checkout page (or a url the user saved) would have the id, and the summary component can use that id to retrieve and display details.

如果未签出的用户尝试直接导航到摘要页面，则 id 将丢失并且导航将失败.

If a user who has not checked out tries to navigate directly to the summary page, the id will be missing and the navigation will fail.

在 ngOnInit 中，对于摘要组件，我将验证 id ，以便如果用户发明了伪造的 id 并尝试导航，我可以重定向而不是加载组件.

In ngOnInit for the summary component, I would validate the id, so that if a user invents a fake id and tries to navigate, I can redirect instead of loading the component.

这将允许合法用户直接导航，以及前进/后退导航正常工作.

This will allow legitimate users to navigate directly, and forward/back navigation to work.

这篇关于角度2:阻止URL上的GET请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！