angular guard-服务注入服务
Angular中的Guard是一种用于路由导航的守卫机制，它允许我们在路由导航发生之前或之后执行一些逻辑。Guard可以用于控制用户是否可以访问某个路由，以及在路由导航发生时执行一些额外的操作。
在Angular中，Guard通常与服务（Service）一起使用。服务是一种可重用的代码块，用于提供某种功能或数据。Guard可以通过注入服务来访问其他服务，以便在路由导航期间执行一些操作。
Guard的主要分类包括：
- CanActivate：用于确定用户是否可以激活某个路由。如果CanActivate返回true，则导航继续进行；如果返回false，则导航被取消。
- CanActivateChild：类似于CanActivate，但用于确定是否可以激活子路由。
- CanDeactivate：用于确定用户是否可以离开当前路由。如果CanDeactivate返回true，则导航继续进行；如果返回false，则导航被取消。
- Resolve：用于在路由导航之前获取必要的数据。Resolve可以通过异步操作从服务器获取数据，并在数据准备好后才继续导航。
Angular Guard的优势包括：
- 安全性：Guard可以用于控制用户是否可以访问某个路由，从而增强应用程序的安全性。
- 灵活性：Guard可以根据不同的条件执行不同的操作，例如检查用户的权限、验证表单数据等。
- 可重用性：Guard可以作为可重用的代码块，可以在多个路由中使用。
- 可扩展性：Angular提供了一些内置的Guard，同时也允许开发者自定义Guard，以满足特定的需求。
Angular中推荐的与Guard相关的腾讯云产品是腾讯云函数（Serverless Cloud Function）。腾讯云函数是一种无服务器计算服务，可以帮助开发者在云端运行代码，无需关心服务器的配置和管理。通过使用腾讯云函数，可以将Guard的逻辑部分部署到云端，从而实现更高的可扩展性和灵活性。
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf
相关·内容
我正在尝试在angular 6中创建一个service-1。这个service-1将被service-2用来发出http请求。
服务-1个
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HttpService {
constructor(
private http: HttpClient
浏览 33提问于2018-08-14得票数 -1
回答已采纳
我正在做angular项目，我需要进行一次审计。我有一个web服务来做插入，并在我的angular项目中调用它，我有一个审计服务，它将使用审计web服务。服务本身运行良好，它调用web服务并插入行，但是当我尝试介绍该服务时，我遇到了以下问题
(function () {
'use strict';
angular
.module('directContactInfo')
.factory('auditService', ['$http', 'serviceResolver',
audi
浏览 15提问于2018-08-03得票数 1
7回答
经过多年的编码，尝试了各种编程风格，剔除了不可读或不切实际的东西，我仍然想不出一件事:单行注释多行缩进代码的最佳方法是什么。
1.
setup_checkpoint();
// if (object->looks_suspicious())
// guard->full_body_scan(object);
2.
setup_checkpoint();
// if (object->looks_suspicious())
// guard->full_body_scan(object);
3.
setu
浏览 0提问于2011-05-11得票数 1
1回答
我在一个文件中添加了一个过滤器，现在我得到了我们都喜欢的注入器错误。我正在尝试解决这个问题，我认为这可能与注入顺序有关。如何声明提供者/服务/等在注入它们之前必须编译的顺序……
HTML：
<script src="js/app.js"></script>
<script src="js/directives/jokesDirective.js"></script>
<script src="js/filters/jokeFilter.js"></script>
<sc
浏览 3提问于2014-06-10得票数 2
1回答
我试图在调整大小时更新一个服务变量。尽管我使用angular.element绑定事件，但该更新似乎没有由控制器注册。
初始的setDevice()可以工作，但是当我在从控制器调整窗口大小的窗口上记录Device服务的大小时，对服务没有任何更改。我尝试过$rootScope.$apply广播更改，但这也不起作用。
服务：
angular.module('health.device', [])
.service('Device', function($window, $rootScope){
var Device;
fun
浏览 1提问于2015-05-05得票数 0
回答已采纳
3回答
我正在尝试向我的主要"App“组件注入一个服务。但是它给出了一个错误(随附的截图)
constructor(private newsApi: NewsApiService) {}
使用上述代码导入服务时，我会得到以下错误
我搜索并找到了解决方案。这意味着
@注入
constructor(@Inject(NewsApiService) newsApi: NewsApiService) {}
但是在Angular.io的文档中，它展示了我使用的第一种方式。我想知道我是不是漏掉了什么？
我的NewsApiService有HttpClient，它发送HTTP请求。在此服务中编写的函数
浏览 2提问于2019-09-20得票数 3
回答已采纳
我正在做一个项目，在这个项目中，我需要从棱角服务之外访问一个服务。不幸的是，从angular外部检索的服务似乎与应用程序中的服务不同。事实上，每当我调用它时，它都是一个新实例。我在下面创建了一个示例来演示这个问题。
<div ng-controller="controller">
<div>
<span ng-bind="count"></span>
<input type="button" value="Inside" ng-click
浏览 0提问于2014-05-04得票数 0
回答已采纳
我已经开始学习角JS，并且在向控制器中注入服务时遇到了问题。我正在尝试将ThreadFactory服务放入ThreadController中，但在调用它时我得到了一个未定义的错误。任何建议都会很好。我得到的错误是：
未知提供者：$scopeProvider <- $scope <- ThreadService
app.js
angular.module('threadsApp', ['ngRoute']);
angular.module('threadsApp')
.config(function ($routeProvide
浏览 6提问于2014-11-03得票数 13
回答已采纳
根据Angular文档，我们只能在配置块中注入提供程序(而不是实例)。
但与此相反，Angular允许您注入$provide或$inject，尽管它们是单独的服务实例。
浏览 4提问于2017-06-10得票数 5
2回答
我有一个由一个组件和一组子组件组成的模块。还有一个专门针对这个模块的服务。
我不确定我的需要是否能理解注入机制。我要做的是将服务注入到所有子组件中。
当我将服务注入组件中时，它是可以的，但我希望在模块级别上设置提供程序。
模块
import { NgModule } from '@angular/core';
import { ChangeUserComponent } from './change-user.component';
import { ChangeUserSidebarComponent } from './sidebar/sideba
浏览 0提问于2019-06-20得票数 1
1回答
我尝试创建一个示例angular2服务并使用它，但我不确定我所犯的错误。组件无法调用服务方法，请参阅柱塞获取更多详细信息
我的服务代码如下所示
import { Injectable } from 'angular2/core';
import { HTTP_PROVIDERS, Http, Headers, Response, JSONP_PROVIDERS, Jsonp } from 'angular2/http';
import { Configuration } from './Configuration';
import 'rx
浏览 5提问于2016-06-12得票数 1
回答已采纳
2回答
我有两个组件和一个服务。我想使用该服务来存储一个公共值。StripeComponent设置服务中的值。我得到以下错误：
无法读取未定义的属性“setAddress”
这是我的组成部分：
import { Component, ViewChild, OnInit } from '@angular/core'
import { NgForm } from '@angular/forms'
import { Address } from '../_models/address'
import { Observable } from '
浏览 0提问于2019-01-29得票数 1
回答已采纳
1回答
我有一个服务列表(我们称之为“处理程序”)和一个管理器(这也是一个服务)。我希望所有处理程序都向经理“注册”自己。我的问题是，没有人注入这些处理程序，所以它们没有被实例化，所以注册它们的代码没有被调用。如何在不注入处理程序的情况下实例化处理程序？
我不想直接将处理程序注入到管理器，因为在这种情况下，注册使它更灵活，并且使它更通用。
代码非常简单：
经理：
angular.module("MyMain").factory('OperationsManager', function () {
var handlers = [];
浏览 3提问于2014-05-07得票数 2
我是Angular2的新手。我试图从组件中调用简单的服务，但是当我试图调用它时，我得到的是未定义的服务实例：
这是我的代码：
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js">&l
浏览 5提问于2016-12-27得票数 2
3回答
我试图在另一个服务中注入一个服务：
instagram.service >event.service.ts(主服务)，其中instagram是将被注入到event.service中的服务。
我已经在instagram.service.ts中声明了app.module。
我得到的错误是：
未明错误:无法解析Instagram的所有参数：(?)CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependencie
浏览 0提问于2018-12-19得票数 0
回答已采纳
注入服务和角2有问题。当我在chrome中启动应用程序时，我在控制台中有以下错误：
reflective_provider.js:232 Uncaught不能解析“用户”的所有参数(LocalDataBase，Platform，未定义)。确保所有参数都使用Inject修饰，或者具有有效的类型注释，并且“User”使用可注入的装饰。
设想情况如下：
我的主App.ts调用服务User.ts，User.ts调用2服务：
App.ts
|
|--- Users.ts
|
|---localDataBase.ts
|---DataServer.ts (servic
浏览 2提问于2016-05-25得票数 0
我将一如既往地使用ng g s nameOfTheService来生成一个service.That，它提供了以下服务
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TestService {
constructor() { }
}
这个服务现在可以通过所有组件访问，但我看到一个视频，其中说我们应该在app.module.ts文件的providers数组中指定服务的名称。为什么我们要这样做呢？我从来没有这样做过，我
浏览 1提问于2020-02-20得票数 1
2回答
我正在扩展angular 5的验证器服务。
我想在这个验证器服务类中注入定制服务(storageService)，我该怎么做呢？
下面是我的验证器服务类代码
import { FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
import { Injectable ,Injector} from '@angular/core';
import { AbstractControl } from '@angular/forms&#
浏览 17提问于2018-01-04得票数 0
我正在开发angular2，我已经创建了服务，并使用@Inject在组件中注入了这些服务。我对服务本身中@Injectable()的使用以及它的区别感到困惑。
浏览 2提问于2016-06-21得票数 3
2回答
我正试着用angular 1.6写一个博客，除了我创建了一个服务并注入到配置文件之外，其他的都运行得很好。测试指令工作正常，只有在注入myService服务/工厂时才会中断。
app.coffee
app = angular.module 'dts',['ngRoute']
app.service 'myService', ->
this.asd = ""
app.directive 'ngHello', ->
return {
restrict:'E'
浏览 1提问于2017-06-24得票数 0
我来自.NET背景，只是一个关于Angular依赖注入的问题。
在.NET/.NET核心中，有三种不同的服务生命周期，它们是:瞬态、作用域和单例。但是对于Angular，它只有等价的"Singleton"，我的理解正确吗？如果是，为什么Angular不提供其他类型的服务，如“瞬态”？
浏览 0提问于2019-11-18得票数 1
我已经从Github下载了azure开发人员门户的源代码并对其进行了自定义。我已经使用angular框架创建了新的小部件，并尝试访问Azure Rest API服务。我在源代码中找到了一个名为mapiclient的通用服务，并试图在我新创建的组件中重用它来调用azure rest api。下面是我正在尝试的代码， **new-widget-runtime.ts**
import { Component, Input, NgModule, Injector } from "@angular/core";
import { CommonModule } from "@a
浏览 41提问于2021-07-22得票数 1
我正在尝试用特定模块的角度js以编程方式解析服务，但我找不到正确的方法。
我知道使用angular.injector('NameOfModule').get('NameOfService')我可以检索服务。但是，使用angular.injector不会检索给定模块的注入器，而是创建一个新的注入器。这意味着当它检索服务时，因为它是一个新的注入器，所以它没有缓存该服务，因此创建了一个新的服务。这意味着我将有几个相同的服务，因此它将不再是一个单独的人，这显然会造成问题。
实际上，我想要做的是从特定模块中检索注入器，这样我就可以尝试从该注入器中检索(缓存或不缓存)服务。
浏览 3提问于2013-09-26得票数 0
回答已采纳
我已经更改了数十个控制器、服务和html
得到了一个未知的提供者异常
未知提供者: bankServiceProvider <- bankService <- BanksBaseCtrl
然而，它并没有告诉我这是由于哪个文件。
铬控制台上的调试消息是无可奈何的。
有什么有用的方法来跟踪buggy源文件吗？
非常感谢
angular.js:12477 Error: [$injector:unpr] Unknown provider: bankServiceProvider <- bankService <- BanksBaseCtrl
http://er
浏览 5提问于2016-04-20得票数 0
1回答
我有一个服务和控制器的大列表，这些服务和控制器是在网站第一次加载之后调用angular.bootstrap时创建的。然后，稍后我想运行一些可以注入依赖项的任意代码。我这样做的方法是创建一个函数，用注释指定它的依赖项，为我所使用的模块获取注入器，然后对该函数调用invoke。
我使用requirejs来加载这个插件和任何其他插件，所以这就是从模块返回的内容。代码如下所示
define [
'scripts/inherits/basePlugin'
] , (BasePlugin) ->
# The explicit block lists the angul
浏览 3提问于2015-10-06得票数 0
回答已采纳
2回答
我正在玩，发现我可以使用一个角度服务，甚至不用注入它的module。我已经创建了3个模块，即moduleA, moduleB, app。moduleA和moduleB是相互独立的，但app模块依赖于moduleA和moduleB。我就是这样创建模块的。
angular.module('moduleA',[]);
angular.module('moduleB',[]);
angular.module('app',['moduleA', 'moduleB']);
在moduleA中，我有一个服务ServiceA，在
浏览 3提问于2016-06-16得票数 2
回答已采纳
我在项目中使用了角ui路由器和指导土豆，我希望ui路由器状态从服务器端加载并添加到app.Config中的状态提供程序，但是不能将$http服务注入app.Config函数，我的代码如下：
var app = angular.module('app', [ 'ui.router.compat']);
app.config(['$stateProvider', '$routeProvider', '$urlRouterProvider', '$http',
function ($stateProv
浏览 2提问于2013-09-29得票数 1
回答已采纳
1回答
我还是安古拉的初出茅庐。我希望在我的控制器中动态地注入(我创建的)服务的依赖项。
但是，当我用依赖项编写服务时，我得到了以下错误：
错误:未知提供程序：$windowProvider <- $window <- base64
这是控制器的代码。
var base64 = angular.injector(['servicesModule']).get('base64');
console.log("base64", base64.encode("my text will be encoded"));
此代码适用于：
v
浏览 3提问于2012-10-06得票数 44
回答已采纳
1回答
我想在这里做点什么，但不确定是否能做到。我想创建这样一个模型类：
import { Inject } from '@angular/core';
import {
Element,
Image,
} from '@situlive/situ-angular-components/contentful';
export class ImageColumn {
title: string;
backgroundImage: Image;
backgroundImageAlignment: string;
const
浏览 1提问于2020-11-22得票数 0
回答已采纳
我有一个类似如下的服务：
import {Injectable} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
@Injectable()
export class QService {
/* A service to handle a query (q) in the search string.
*/
constructor(
private _router:Router,
routeParams:RoutePara
浏览 0提问于2016-03-19得票数 2
1回答
我使用angularJS已经有一段时间了，我想知道以这种方式使用DI是否正确。假设我想定义一个服务，它需要一些角度的服务。我可能会写以下内容：
var app = angular.module('myapp', []);
app.service('myService', function($q, $http) {
// Do stuff
});
如果我这样写是对的吗：
var app = angular.module('myapp', []);
app.service('myService', function($inje
浏览 3提问于2014-04-07得票数 0
回答已采纳
我想使用location服务，但是当我注入该服务时会出现未定义的错误。
这是angularjs代码：
(function () {
"use strict";
angular.module("workPlan", ['ui.router',
'geomindCommon',
'templates',
浏览 0提问于2016-09-26得票数 0
我刚接触到angularjs，我正在开发一个应用程序，它使用基于令牌的身份验证过程，我已经创建了一个身份验证服务，通过它我可以获得令牌，但是当我在其他控制器中使用这个服务时，我得到的$injector:unpr错误任何帮助都是值得赞赏的。
我的服务: authService.js
var app = angular.module('loginFormApp', []);
app.controller('loginFormCtrl', function ($scope, AuthService) {
$scope.loginCall = functio
浏览 1提问于2016-06-20得票数 0
我想把我的服务注入我的工厂，让我的工厂在我的控制器中使用：
控制器
app.home.controller('HomeController', ['$scope', '$http', 'Project', function ($scope, $http, Project) {
var project = new Project();
$scope.refresh = function(){
project.createTable();
};
$scope.refresh();
浏览 3提问于2016-04-24得票数 4
回答已采纳
我正在处理这个未知的提供者问题，但已经检查了其他线程并应用了这些解决方案，但没有结果。我希望将一个名为“MockSvc”的服务注入到控制器中，而不会出现错误。任何建议都有帮助。
app.js：
(function(){
'use strict';
console.log('enter app.js....');
var app = angular.module('app', ['ngRoute']);
})();
服务：
(function(){
'use strict';
浏览 3提问于2016-12-13得票数 1
回答已采纳
我的角度版本是1.4.8。
我有一个由es-6类定义的服务。
class OrdersService {
...
}
export default angular.module('services.orders', [])
.service('ordersService', OrdersService)
.name;
我想把它注入另一个模块
import ordersService from 'orders.service'
function routes($stateProvider, ordersService)
浏览 3提问于2015-12-28得票数 1
回答已采纳
我是Angular JS的初学者。我创建了一个仅定义服务的服务模块：
(function() {
var srv = angular.module("service_module",[]);
srv.service("HotelService", function($http, $q) {
//My code written here
});
})();
并且我创建了一个模块，在这个模块中编写了控制器：
(function() {
var controllers = angular.module("controllers_modu
浏览 1提问于2016-09-03得票数 0
回答已采纳
2回答
是否可以在启动时在angular 2中执行服务？bootstrap不执行服务的contstructor。而且，每次在某个组件中注入服务时，注入器都会执行服务的contstructor。有没有一种方法可以使服务单调，并确保ctor只运行一次？
浏览 1提问于2016-01-21得票数 4
1回答
我试图创建一个简单的服务，并在茉莉花-业力环境中测试它。
我用过角1.5.5
因为某种原因，我一直在犯错误
Chrome 46.0.2490 (Windows 7 0.0.0) reddit api service should do something FAILED
Error: [$injector:unpr] Unknown provider: redditServiceProvider <- redditService
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=redditServiceProvider
浏览 4提问于2016-06-29得票数 2
回答已采纳
我很困惑为什么下面的代码可以工作，即使我没有注入自定义服务。我不明白你什么时候要注射，什么时候不注射。
(function() {
'use strict';
angular.module('svccApp', []);
angular.module('svccApp').
factory('bareService', [
function() {
var myValue = {};
myValue.str1 = 'xyz';
return myValue;
}
]);
a
浏览 3提问于2014-11-14得票数 1
回答已采纳
1回答
我正在学习angular1，我遇到了服务和工厂。通过传入表示所需服务名称的字符串，我调用了.factory()方法，如下所示。后来，我能够引用与字符串名称相同的变量，但我从未真正创建过该变量。有人知道为什么会这样吗？我认为这与依赖注入有关，但我不能理解angular/js实现这种自动变量创建的机制。
app.factory('myData', function() {
return {...}
}
app.controller('MyController',
function MyController($scope, myData) {
浏览 0提问于2016-10-13得票数 0
因此，我开始学习角，并刚刚开始研究服务和依赖注入。我创建了一个非常基本的服务，并试图使用提供者来使用组件中的服务。但是，在组件中，它给出了错误。
找不到名字“CourseService”
快速解决方法是直接将服务导入组件中，但是我知道这是一种错误的做法，与服务和提供者的观点背道而驰。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModul
浏览 1提问于2020-09-02得票数 0
今天，当我从Angular 5升级到Angular 6时，我遇到了一个编译器错误，在运行ng build之后，我得到了以下错误
Can't resolve all parameters for MyService in /tmp/src/my.service.ts: (?). This will become an error in Angular v6.x
在服务中，它看起来像这样(我简化了示例)：
@Injectable()
export class MyService<T> {
constructor(temp: T = null) {
}
}
我已经
浏览 0提问于2018-05-12得票数 1
我的拦截器服务正在将授权头添加到我的http调用中，但未能包括我传递到拦截器服务中的实际承载令牌值。在chrome dev工具中出现的持有者令牌值只是'not set‘值，而不是持有者令牌值。当我从登录组件控制台登录时，不记名令牌值确实正确显示，因此我知道它正在被设置，但我猜它在随后的http调用中使用之前，在某个点被重置回“未设置”值？
import { Component, OnInit } from '@angular/core';
import { Router }
浏览 0提问于2017-11-16得票数 1
回答已采纳
1回答
我试图将以下服务重构为匿名服务：
angular.module('adress.services', [])
.factory('Adresses', function () {
var adresses = [
{
"ID": 1,
"person": "Bladiebla",
"name": "blabla",
}];
var service = {
all: all,
get:
浏览 1提问于2016-03-23得票数 1
回答已采纳
我正在尝试将controllers.js中的Angular HTTP.get函数转换为services.js中的服务。
我发现所有的示例都有冲突的方式来实现服务，并且它们的名称选择是令人困惑的。此外，实际的angular服务文档使用了与所有示例不同的语法。我知道这很简单，但请帮帮我。
我有app.js，controllers.js，services.js，filters.js。
app.js
angular.module('MyApp', []).
config(['$routeProvider', function($routeProvider)
浏览 31提问于2012-12-19得票数 46
回答已采纳
TL;DR如何使用我自己的方式生成remember_me令牌？
我有一个旧的网站，没有任何框架，我已经得到了用Laravel (5.4.23)重写它的工作。数据库是不可触及的，不能重构，也不能以任何方式修改。
我能够使用不同的用户模型自定义Laravel身份验证过程，该模型反映了旧的DB。但是当涉及到“记住我”功能时，我对令牌的长度有一个问题。
旧站点已经使用了“记住我”功能，但是它的DB字段被定义为二进制(25)。SessionGuard类生成的令牌长度为60个字符。
我的第一个尝试是尝试在将令牌写入数据库之前找到一种缩短令牌的方法，并在从数据库中读取令牌后再次扩展它。我找不到这样的方法(我
浏览 0提问于2017-06-08得票数 0
在angular中，我们需要创建@Injactable服务类并将其提供给我们的项目。
从理论上讲，我们也可以导入作为单例服务执行的es6模块。
除了这不是“角度方法”，为什么这种方法不那么常见呢？
角度方式
import { Injectable } from '@angular/core';
@Injectable()
export class fo {
getFo():{
}
}
es6方式
const bla = []
const fo() => {return bla}
export {
fo
}
浏览 6提问于2017-04-05得票数 1
1回答
我有以下组件，试图在其中注入服务：
angular.
module('phoneList').
component('phoneList', {
templateUrl: '/static/common/angular/phone-list/phone-list.template.html',
controller: ['$http', 'authenticationService',
function PhoneListController($http, authenticat
浏览 2提问于2016-09-11得票数 0
我有一个叫做timer的模块，其中包含了我的控制器和服务。这是我的module.js文件。
(function () {
'use strict';
angular.module('timesheet.timer',[
'timesheet.timer.controllers',
'timesheet.timer.services'
]).filter('digits', function() {
return function(input) {
if (
浏览 0提问于2016-11-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
