Angular 4 封电子邮件 link

Question

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

我已经为 ResetPassword 等定义了路由

 { path: 'ResetPassword', component: ResetPasswordComponent }

我是否需要在 angular 4 个应用程序中配置任何特定内容，以便在从电子邮件中单击 link 时，它可以直接进入重置密码页面？为什么它给我 404 错误？

提前致谢。

Answer 1

您需要将您的网络服务器配置为 return 在找不到所请求的资源时 index.html 文件，以便 Angular 可以加载并接管以获取那条路线。如果您无法配置它，那么您将需要配置 Angular 以使用 HashLocationStrategy 作为 URL。这会创建如下所示的 URL：www.mywebsite.com/#/login.

Answer 2

以下 2 个步骤解决了我的问题，希望对某人有所帮助：

1) 我刚刚注意到我定义的 ResetPassword 路由在“**”之后（404 - 未找到）。

因此，每当它尝试查找 ResetPassword 时，都会发现 404 在 ResetPassword 之前未找到。

当我将路由模块更改为在“**”之前定义 ResetPassword 时，我能够直接从电子邮件 link.

打开 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

但是，这只适用于本地主机。当我将我的代码部署到托管服务器时，需要执行第 2 步才能使其正常工作。

2) 在托管服务器上，我必须使用以下设置更新 web.config 文件以将所有路由重定向到根目录或 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 提供以下 post 的 web.config 设置的详细信息：

感谢 Danial 的回复！

Answer 3

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

RewriteEngine on
RewriteBase    /

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

RewriteRule . index.html [NC,L]

解决问题。

Angular 4 封电子邮件 link

Angular 4 Email link

angular

angular-ui-router