Angular 4电子邮件链接

Question

我有Angular 4应用程序，当用户提供电子邮件并单击忘记密码时，我将重置密码链接发送到我的电子邮件。当用户点击电子邮件中的链接时，它应直接进入ResetPassword或登录屏幕。但是，当我点击电子邮件中的链接时，它会给我404错误，而不是将用户带到指定页面（即www.mywebsite.com/ResetPassword?token=token123）。

我已经为ResetPassword等定义了路由。

 { path: 'ResetPassword', component: ResetPasswordComponent }

我是否需要配置角度4应用程序中的任何特定内容，以便在单击电子邮件中的链接时直接进入ResetPassword页面？为什么它给我404错误？

提前致谢。

Answer 1

您需要配置Web服务器以在找不到所请求的资源时返回index.html文件，以便Angular可以加载并接管以获取该路由。如果您无法对其进行配置，则需要配置Angular以将HashLocationStrategy用于URL。这会创建如下所示的URL：www.mywebsite.com/#/login。

Answer 2

以下两个步骤解决了我的问题，希望它可以帮助某人：

1）我刚才注意到我定义的ResetPassword的路由是在'**'之后（404 - 未找到）。

因此，每当它试图找到ResetPassword时，它会发现在ResetPassword之前找不到404。

当我更改路由模块以在'**'之前定义ResetPassword时，我能够直接从电子邮件链接打开ResetPassword页面。

{ path: 'ResetPassword', component: ResetPasswordComponent },	// Define this one first prior to ** - 404 not found
{ path: '**', component: PageNotFoundComponent } // otherwise redirect to 404-Page Not Found

上一个代码：

{ path: '**', component: PageNotFoundComponent }
{ path: 'ResetPassword', component: ResetPasswordComponent },	// Never reached here as I got 404 prior to reaching this route

但是，这只适用于localhost。当我将代码部署到托管服务器时，它需要在步骤＃2下面使其工作。

2）在托管服务器上，我不得不使用以下设置更新web.config文件，以将所有路由重定向到root或index.html。

    <system.webServer>
    <rewrite>
        <rules>
            <clear />
            <rule name="Redirect to https" stopProcessing="true">
                <match url="(.*)" />
                <conditions>
                    <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                </conditions>
                <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
            </rule>
            <rule name="AngularJS Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

感谢@ guilherme-teubl，了解有关web.config设置的以下帖子的详细信息：

angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable

感谢Danial的回复！

Answer 3

如果您使用的是Apache，请添加一个.htaccess文件，其中包含以下内容：

RewriteEngine on
RewriteBase    /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . index.html [NC,L]

解决了这个问题。