Angular :点击routerLink时如何在auth.guard.ts中获取url
在Angular中，可以通过在auth.guard.ts中使用ActivatedRouteSnapshot对象来获取点击routerLink时的URL。
首先，需要在auth.guard.ts文件中导入ActivatedRouteSnapshot和Router模块：
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';然后，在AuthGuard类中实现CanActivate接口，并在canActivate方法中获取URL：
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const url: string = state.url;
// 在这里可以使用url进行相关的验证逻辑
return true; // 返回true表示允许访问，返回false表示禁止访问
}
}在上述代码中，state.url可以获取到当前路由的URL。你可以在canActivate方法中使用url进行相关的验证逻辑，例如检查用户是否已登录或是否具有访问权限等。
需要注意的是，为了使用AuthGuard，你需要在路由配置中将它应用到相应的路由上。例如：
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
// 其他路由配置...
];以上代码中，将AuthGuard应用到了路径为'/dashboard'的路由上，表示只有通过AuthGuard验证的用户才能访问该路由。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供相关链接。但你可以通过访问腾讯云官方网站，查找与Angular相关的云产品和服务。
相关·内容
我想在单击routerLink创建的链接时获取auth.guard.ts文件中的URL。下面是我在.html文件中的代码： <li><a href="javascript:void(0)" routerLink="genre" routerLinkActive="active">Genre</a></li>
<li><a href="javascript:void(0)" routerLink="category" routerLinkActive
浏览 10提问于2020-03-17得票数 0
回答已采纳
7回答
我正尝试在我的Angular 7应用程序中使用带有href的锚标签。当我点击链接时，浏览器中的url会改变，但是页面不会被导航到。如果我把target=写成“_self”，它就能工作。
<a href="/abcd" target="_self">Abcd</a>
但是，这并不只是浏览器中的url发生了变化，而是什么也没有发生。
<a href="/abcd">Abcd</a>
就像我使用Angular routing和RouterLink一样，它可以工作。
<a routerLink=
浏览 7提问于2019-09-24得票数 24
我是Angular 2的新手，还处于学习阶段，但我陷入了一个问题，没有得到解决方案。请帮帮忙。
我已经做了一个登录视图，然后链接到它点击链接后，它将重定向到主页，然后点击一个链接，它将重定向到其他一些视图。
下面是我的代码结构：
app.routing.ts：
import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
浏览 0提问于2018-02-06得票数 0
1回答
我正在尝试实现在路由到相同组件时重新显示加载指示器。 html： <div *ngIf="car$ | async as car; else loadingCar">
Selected {{car}}
</div>
<ng-template #loadingCar>loading...</ng-template>
<div>
<a routerLink="/cars/bmw">
<button class="button">B
浏览 17提问于2020-04-02得票数 0
回答已采纳
1回答
我在玩Angular2辅助线路，我想不出什么办法。
假设我们有一个基本的邮件应用程序，也有一些联系人。
基本上，我的HTML看起来如下：
<div>
<a [routerLink]="['emails']">Emails</a>
<a [routerLink]="['contacts']">Contacts</a>
<a [routerLink]="[{outlets: {aux: ['auxiliary']}}]">
浏览 6提问于2016-09-21得票数 2
6回答
我想改变我的按钮颜色点击使用角度和css，因为我是非常新的。
.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'title';
}
.html
<mat-sidenav
浏览 1提问于2020-08-05得票数 2
尝试使用angular2创建SPA：
在我的主要模块中，我声明将要使用的路由和组件：mainApp.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { BaseComponent,IndexComponent, ContactComponent,
浏览 3提问于2017-03-26得票数 0
回答已采纳
2回答
我想将网页保存在内存中，这样当我点击后退按钮(而不是浏览器上的那个)或路由器链接时，如果我已经访问过它，HTML页面就会立即加载(因为我有一些数据要加载，而我不想被重新加载)。
我见过一个带有选项卡式界面的方法：，但它不适合我的代码体系结构。
我在angular2中使用routerlink来导航抛出的页面，并在单击时使用back按钮调用函数以转到上一页。
我尽可能地详细介绍，这样人们就可以更好地理解我的代码体系结构和routerlink方法的工作方式。
后退按钮功能(独立于routerlink工作)：
goBack() {
window.history.back();
}
从第1页到第2
浏览 0提问于2016-06-14得票数 3
1回答
我有一个常规的angular 4应用程序，我使用路由器，ActivatedRoute.params.subscribe，routerLink等在页面之间导航和解释URL。
这导致了一个事实，我有很多“魔法字符串”到处飞，因为许多不同的.ts文件中都有url片段。当然，这是可行的，因为它们是匹配的，但在我看来，这似乎是一种纠缠。下面是一个随机的例子：
<a [routerLink]="['/foo']">Home</a> <a [routerLink]="['/foo/item', 1]">It
浏览 0提问于2017-08-29得票数 4
1回答
我构建了一个Angular4应用程序，一切运行良好，但是在部署之后，我遇到了一个奇怪的问题。
我有三条路线：
/：AppComponent
/login：LoginComponent
/editor：为了我的EditorComponent
在开发模式下，当我在导航器localhost://4200/login或localhost://4200/editor的url栏中写入时，工作正常，但在部署后执行时，会得到404 Page not found！
但是，当我使用routerLink的角像<a routerLink="/login">Login</a>，并
浏览 3提问于2017-09-08得票数 0
回答已采纳
我正在尝试动态创建带有urls列表的链接：
<span *ngIf="item.type=='link'">
<a class="nav-link" [routerLink]="item.routerLink" skipLocationChange>{{item.label}}</a>
</span>
当我在我的localhost中运行dev时，这个解决方案工作得很好，但在尝试构建我的库时，我得到了以下错误：
RROR: Can't bi
浏览 0提问于2021-02-24得票数 0
在cordova应用程序中包装了一个angular应用程序，在我点击back按钮后，该应用程序似乎不再处于"angular zone“中，所以如果我之后点击任何路由器链接，它什么都不做，并抛出错误Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()
我已经尝试在路由中添加"pathMatch：'full'“。我还尝试了这里的解决方案：，它可以工作，但我不希望在每个页面上都编写this.ngZone.run(() => this.router.n
浏览 14提问于2019-07-25得票数 0
回答已采纳
1回答
历史(推状态)向前/向后按钮不工作的角2路由器，我已经测试了这一点在Chrome和火狐。前进按钮永远不会工作，向后按钮只工作2个步骤，而UI没有根据后向按钮做出响应。
我有如下代码。
app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
浏览 1提问于2016-05-12得票数 4
回答已采纳
1回答
我在项目中的sidemenu上添加了一个新菜单。我把它和一个服务联系起来。但是当我点击菜单时，它不会加载页面。它不会给我一个错误。我不明白为什么会发生这种事。 如果你愿意，我可以在这里编写服务和页面模块。 我添加了我的项目的一些代码。请帮帮我。 我的app.component.ts export class AppComponent {
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
浏览 5提问于2019-05-03得票数 0
我是Angular2的初学者。当我从学习angular2路由服务时。我希望总是显示英雄组件，所以我在app.component.html中是这样的：
<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/heroes">Heroes</a>
<a routerLink="/dummy">Dummy</a>
</na
浏览 0提问于2018-05-23得票数 2
1回答
在我的angular HTML代码中，有三元条件，如下所示 <my-tag [top-position]="find.distance ? find.distance.code : find.volume.code" [rClass]="r.rClass"></my-tag> 我正在努力使上述内容可点击，以便当用户点击时，他们被重定向到不同的路线。我很难将routerLink集成到上面的代码中
浏览 8提问于2020-11-11得票数 0
所以问题就在标题里。我需要通过点击[routerLink]按钮和用户在浏览器搜索栏中手动输入URL来进行不同的导航。
UPD:，所以我有固定菜单的页面。这个菜单看起来像：
<ul>
<li [routerLink]="[/step1]">Step1</li>
<li [routerLink]="[/step2]">Step2</li>
<li [routerLink]="[/step3]">Step3</li>
</ul>
每个步骤都有自己
浏览 0提问于2018-06-27得票数 4
当页面加载导航应该隐藏时，我正在处理导航默认设置。当我点击图标时，我想像切换一样显示导航。当我将鼠标移出导航时，我应该隐藏导航。angular 4.0。
index.html
<button class='user_login' (click)='btnResult()'>
<img src="./assets/menuicon.png" >
</button>
nav.component.html
<ul class="nav navbar-nav navbar-right menu&#
浏览 0提问于2017-07-11得票数 1
2回答
我试图在社交媒体和公司之间导航，但当我点击公司时，它的组件正在加载，但当我访问社交媒体时，我会出错
错误我得到-错误:未知(承诺)：错误:不能匹配任何路由。URL段：“社交媒体”错误:无法匹配任何路由。URL片段：“社交媒体”
我把代码的细节写在下面
app-routing.module.ts文件
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes } from '@angular/router&
浏览 1提问于2018-08-20得票数 1
回答已采纳
1回答
我在将用户踢出到根url时遇到了麻烦。
以下代码不起作用
路由器
export const RouteDefinitions: Routes = [
{
path: 'home',
component: LandingPageComponent,
canActivate: [AuthGuard]
},
{
path: 'holmes',
component: HolmesMasterComponent,
canActivate: [AuthGuard],
children: [{
浏览 0提问于2018-08-30得票数 0
2回答
当点击routerlink时，我很难理解当前无法加载新页面的问题。
我尝试过许多不同的链接结构，但是不管我将其更改为控制台中的错误，
48 39436:48异常: Uncaught (承诺)：错误:无法匹配任何路由。URL段：“流”
我使用模板布局，然后使我的页面子的这些布局。一个布局是安全的，另一个布局是公共的。
在app.routing.ts中
const APP_ROUTES: Routes = [
{
path: '',
redirectTo: 'stream',
pathMatch:
浏览 1提问于2016-10-27得票数 1
回答已采纳
我的routerLinks在我的Angular2应用程序中工作。从我的主下拉菜单，当我点击链接，他们加载正确的URL和相应的正确的组件。但是，我在应用程序的另一部分中列出了相同的链接，由于某种原因，它们在应用程序中不起作用。我点击它们，什么都不会发生-没有URL更改，也没有加载组件。工作实例和非工作实例之间唯一的区别是，非工作实例包括附加到"ul“中的"li”项的链接。首先，我将列出正在工作的代码：
<div class="nav-menu-item indent"><a routerLink="about">About
浏览 1提问于2016-11-11得票数 0
回答已采纳
我正在尝试有一个导航栏，当你点击一个子部分，它会导航到一个新的页面。现在，当您单击nav中的一个子部分时，该组件将简单地显示在主页上现有组件的下面。
这是我的app.component.html
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" routerLink="#"><img class="navBarLogo" src="../../assets/whitelogo.png"></
浏览 0提问于2019-09-29得票数 1
我有一个应用程序是使用离子角标签模板设置。无论出于什么原因，我都无法使用RouterLink进行导航。当我单击提供了RouterLink属性的元素时，什么也不会发生。我已经搜索了几个小时，看到了和这里相同的建议：RouterLink not working in child components 实际上，我已经在所有页面的导入中添加了RouterLink，但仍然没有成功。使用angular ionic选项卡模板，我将从选项卡页转到嵌套的详细信息页。选项卡页面使用RouterLink成功导航到我的详细信息页面。但在我的详细信息页面中，我无法设置链接或按钮来使用RouterLink导航到另一条路
浏览 21提问于2020-06-20得票数 0
目前，我正在玩angular2路由。每件事情都像预期的那样正常工作，但是在浏览器中手动输入路由url就不能工作了。
我正在使用的当前代码
app.ts
import {Component} from 'angular2/core';
import {Route,RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from "angular2/router";
import {DashboardComponent} from "./dashboard/dashboard.component"
浏览 4提问于2016-02-13得票数 4
1回答
我有一条这样的路线
<a [routerLink]=" ['../projects', project.id] ">
当我尝试从这个url获取一个路由参数时，我什么也得不到。
我的导入：
import { Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
我的构造函数：
constructor(private route: ActivatedRoute) {}
My on init：
ngOnIn
浏览 0提问于2016-11-16得票数 0
我使用Angular 2 RC.2和新的Router (从Router开始)。我知道[routerLink]指令提供了生成URL的功能，但是如何使用从API server获取的参数来设置链接？
// Getting errors because self is undefined...
<a [routerLink]="['/users', 'edit', self.id]">Update Profile</a>
// Then, using Safe Navigation Operator but getting er
浏览 4提问于2016-07-04得票数 0
2回答
我有一个带有以下标记的Angular应用程序：
<p>{{item.content}}</p>
显示的内容如下所示：
<p>You can find the content here <a href='javascript:;' ZID='01' TID='11' EID='21' type='link'>TEST</a> and don't forget to visit other sites.</p>
换句话说，角度插值的结果始终
浏览 1提问于2018-01-18得票数 1
使用Angular4，我可以使用以下语法链接到组件：
<a routerLink="MYLINK">link</a>
然而，MYLINK的语法对我来说并不清楚。它是根据RFC 3986的路径吗，即它必须遵循URL转义规则吗？或者它是未转义路径段的串联？
例如，我是否会这样写
<a routerLink="/root/my%20page">link</a>
或
<a routerLink="/root/my page">link</a>
在Angular中有这方面的文档吗？
我
浏览 0提问于2017-09-16得票数 2
我已经将我的应用程序从角9升级到了角10。升级过程非常成功，我可以运行这个应用程序。但是，当我发出ng serve命令时，它将显示以下警告。
WARNING in src\app\auth\guard\auth.guard.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
WARNING i
浏览 6提问于2020-09-03得票数 3
1回答
假设网页上有三个类别-大陆、国家、州。我目前正在处理一个按钮，它已经放置在不同的页面上。我想当按钮将被点击时，我的页面将自动重定向到类别页面，并滚动到第三部分，即状态部分。我对Angular有点陌生，已经尝试了很多其他网站上提到的方法，比如使用RouterLink，导航，路线，但都没有像现在这样按照我的预期工作。有人可以在这方面提供帮助或分享一些已经开发的链接。 提前谢谢。
浏览 21提问于2021-01-15得票数 1
回答已采纳
1回答
我对routerLink有两个问题。第一个问题是routerLink是不可点击的。我是说真的。这是我的代码：
<div class="collapse navbar-collapse" style="margin-left: 50%">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="
浏览 9提问于2021-12-09得票数 0
回答已采纳
我正在寻找一种使用路由过滤数据来将mac id传递到服务中的方法。在我的app.html中，我有一个下拉菜单，其中显示(手动编写).Using angular激活的路由的mac地址列表，如何将mac id放入angular服务中，以便我可以在过滤器方法中使用它。
app.html
<ul class="dropdown-menu scrollable-menu" role="menu">
<li><a routerLink="mac/:id">3s-ds-23-sf-23-ce-33</a&
浏览 0提问于2017-02-19得票数 0
1回答
在我的angular4项目中，我试图实现子路由。而路线是
path: 'adminPanel', component: AdminPanelComponent,
children: [
{
path: '',
redirectTo: 'dashboard', pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'setting1'
浏览 3提问于2017-09-02得票数 0
回答已采纳
1回答
当我在我的VideoComponent中时，我的网址是这样的：app/video/9
这就是问题所在，当我点击一个标签(使用routerLink)并像这样重写我的EditComponent时，我想要到达我的url：app/video/9/users/3
这是我的路由配置：
@RouteConfig([
{ path: '/video/:video_id/users/:user_id', component: Edit, name: 'Edit'},
{ path: '/video/:video_id/', compon
浏览 5提问于2016-07-28得票数 0
1回答
我试图使canActivate函数返回true或false。
布尔值将来自response.json().message中的文件login.service.ts中的函数response.json().message，并显示为true或false，但在auth.guard.ts文件中使用canActivate函数时不显示该值。
有人知道怎么解决这个问题吗？
login.service.ts
import {Injectable} from "@angular/core";
import {Http, Headers} from "@angular/http";
i
浏览 2提问于2016-08-19得票数 1
回答已采纳
2回答
我正在使用TypeScript学习Angular JS。我有使用Angular JS的经验。但当它与TypeScript集成时，它对我来说是全新的。我现在正在为我的应用程序配置路由。
This is my app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import
浏览 1提问于2017-12-26得票数 2
2回答
我有一个小菜单，可以帮助用户通过滚动到以下选项在同一页面中导航：
<div class="listContainer">
<div class="row">
<div class="list-group" id="list-tab" routerLinkActive="active-link">
<ul>
<li><a routerLink="./" [fragment]=&
浏览 46提问于2019-03-26得票数 0
angular2路由器有问题，当我点击带有`routerLink=“‘/it console gives me an error of’it console gives me an error of原始异常: TypeError:无法读取url的属性'startsWith‘的链接时，它工作正常。”
我根本没有改变任何东西，这个错误是凭空而来的。我在我的代码中找不到任何东西，所以不确定这是否是一个依赖问题。其他人也有这个问题吗？
<a [routerLink]="['/reserve']" class="float-shadow"&g
浏览 4提问于2016-08-02得票数 0
我尝试创建一个简单的angular2组件，并且在将指令绑定到原生DOM元素时出错。
例如：
/// <reference path="../../typings/_custom.d.ts" />
import { Component, View } from 'angular2/angular2';
import { RouterLink } from 'angular2/router';
@Component({
selector: 'my-component',
directives: [Rou
浏览 4提问于2015-08-27得票数 6
回答已采纳
2回答
我在angular14中使用JSON服务器伪造rest，并使用JSON文件创建动态菜单，它非常有效，但我只想在用户单击菜单时将菜单路由到相同的位置。为了您的方便，我将与您分享密码。
有谁能解决这个问题吗请告诉我。谢谢
db.json
"users": [
{
"displayName": "Home",
"routerLink": "become-angular-tailer"
},
{
"displayName": "Serv
浏览 5提问于2022-08-31得票数 1
回答已采纳
我使用skipLocationChange属性更改了路由，但没有更改url，如下所示。
<a [routerLink]="['/articledetail']" skipLocationChange><h4>{{article.HeadLine}}</h4></a>
但当我刷新页面时，它会转到上一条路径。
然后我使用ngIf来检查一个变量值，在一个方法中设置它的值，这个方法在点击锚定标签时被调用，这里也是.But，我的内容是刷新页面后的先前内容
单击angular 2中的锚标签时，如何在不更改url的情况下更改页面
浏览 5提问于2017-12-05得票数 0
回答已采纳
2回答
我需要单击按钮从公司A导航到公司B，在导航时我想将员工编号数据传递给公司B。由于安全问题，我不想要查询字符串URL格式(不应该像app/structure/profile/12345)
如何通过传递数据来导航组件B。
Comp A html代码：
<button class="btn btn-outline-primary " routerLink="/structure/profile">View profile</button>
我试过的是：
<button class="btn btn-outline-primary
浏览 8提问于2020-11-12得票数 1
回答已采纳
我想在Angular中创建一个详细信息页面，并希望通过RouterLink传递一个条目id。有没有办法获取url中的参数？
网址如下所示：http://localhost:8080/details?date=13-09-2016
浏览 22提问于2016-09-13得票数 2
回答已采纳
我正在做菜单导航。我有一个菜单图标，我想添加类到它来控制它从主要的css文件。
当页面加载时，我想隐藏导航。当我点击图标时，我想显示导航。当我将鼠标移出导航时，我应该隐藏起来。我对如何从哪个文件调用css感到困惑，我不得不在app.component.ts中编写单击事件或在哪里。我必须在angular 4.0中做所有这些事情。
Thanks in advance.
<img src="./assets/menuicon.png" [ngClass]="iconStyle">
<ul class="nav navba
浏览 9提问于2017-07-10得票数 0
<a routerLink="/add"></a><mat-tab label="Add Identity"></mat-tab>
或
<mat-tab label="Add Identity"> <a routerLink="/add"></a></mat-tab>.
我是Angular的新手，正在尝试使用上面的Angular材质组件进行布线。
但当我单击Home选项卡时，它不会附加URL。对此有什么帮助吗。
浏览 0提问于2017-12-25得票数 19
目前，我能够处理使用Angular 2 RC1进行路由的基本情况，例如只有几个链接的主组件，单击它们可以在主路由器插座中渲染内容。
同样，单击子组件中的链接会在子组件路由器出口中呈现其子组件。
我不能完成的是我需要在应用程序的主出口中呈现一个子组件的情况。
我的url结构如下：
/account/user/
/account/user/profile/
/account/user/otherfeature/
/account/admin/
/account/admin/somefeature
/account/admin/anotherfeature
我有以下代码，它在运行时会显示一个主页，
浏览 1提问于2016-05-24得票数 1
我正在创建一个仪表板，并使用bootstrap grid.Now创建了侧栏菜单，当我单击任何侧栏菜单的routerLink时，我想要的。我的目标是在行的下一列中打开该链接，就像通常在仪表板/管理面板中发生的那样。但在我的例子中，当我点击链接时，它会转到下一页。 <div class="row">
<div class="col-sm-2">
<div class="list-group">
<a routerLink="dashboard" class="list-gr
浏览 19提问于2019-04-14得票数 0
1回答
我已经使用CLI创建了一个angular 2应用程序，我正在学习它，我正在尝试设置一个路由，但由于某种原因它不工作，当链接被点击时，url被正确地显示，但html内容是相同的，我想要显示的组件的内容没有被显示…
这是app.module.ts代码：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
impo
浏览 4提问于2017-07-08得票数 1
回答已采纳
我已经通过以下链接创建了angular客户端和spring boot服务器应用程序。
在我的angular应用程序中，我定义了如下路由：
当我使用"ng serve“启动angular development server并在浏览器中点击url下方时，它工作得很好。
然而，当我启动spring boot，然后在浏览器中点击下面的URL时，它不工作并抛出错误。
我的要求是，当我在浏览器中点击angular路由的URL时，我应该能够加载特定的angular组件。我的angular组件不需要从后台的rest API获取任何数据，它是一个简单的angular组件。
有没有
浏览 0提问于2018-10-19得票数 1
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
腾讯云开发者
