如何在Angular中从window身份验证中获取用户名？
在Angular中从window身份验证中获取用户名，可以通过以下步骤实现：
- 首先，确保你已经在Angular项目中引入了
@angular/common模块。 - 在你的组件中，导入
Injectable和DOCUMENT符号：
import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';- 创建一个名为
AuthService的服务，并使用@Injectable装饰器进行注解：
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(@Inject(DOCUMENT) private document: Document) { }
getUsername(): string {
return this.document.defaultView?.name || '';
}
}- 在
getUsername方法中，通过this.document.defaultView?.name获取到当前窗口的用户名。这里使用了可选链操作符?.来确保在没有用户名时不会抛出错误。 - 在需要获取用户名的组件中，注入
AuthService服务，并调用getUsername方法：
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
@Component({
selector: 'app-my-component',
template: `
<div>
Username: {{ username }}
</div>
`
})
export class MyComponent {
username: string;
constructor(private authService: AuthService) {
this.username = this.authService.getUsername();
}
}通过以上步骤，你就可以在Angular中从window身份验证中获取到用户名了。请注意，这里的实现是基于浏览器环境下的window对象，因此适用于前端开发中的身份验证场景。
相关·内容
1回答
使用角11登录后刷新标头组件
javascript、angular
实际上，我使用的是角11，我想在头组件中显示用户名，但是我的头先加载，然后加载登录组件，所以在本地存储加载登录组件数据存储后，为什么当我刷新页面时显示用户名，但我不想刷新页面，那么我能做什么，请帮助我。
下面的代码是我的创作服务
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment'
import { HttpClient } from '@angular/common/http';
import
浏览 1提问于2022-02-11得票数 0
2回答
错误TypeError：_co.getAdmin不是一个函数
html、angular、typescript、service、typeerror
这是一个应用程序，auth.service中的函数getAdmin()有问题，但我不知道是什么。当我将这个函数移到app.component.ts并在HTML中更改为"getAdmin()"时，它是可以的，但是我需要这个函数。请告诉我出了什么问题，我该怎么解决。
PS。变量admin作为字符串返回'true'或'false'。这是电子商务应用程序，有用户认证，令牌，现在我尝试添加管理。
auth.service.ts：
import { Injectable } from '@angular/core';
import { Htt
浏览 2提问于2020-02-21得票数 2
回答已采纳
1回答
使用JWT登录Angular 10
javascript、node.js、angular、typescript
我在angular中使用JWT登录时遇到了问题，我已经通过登录成功登录并存储了令牌，但我的前端没有使用相同的更新 Auth.service.ts import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ErrorprocessorService } from './errorprocessor.service';
import { Observable, Subject
浏览 9提问于2020-07-13得票数 0
回答已采纳
2回答
不使用LocalStorage或Cookie的Auth防护装置
angular、typescript
我用角度实现了auth保护，但我没有访问本地存储或cookie来检查用户是否经过身份验证，而是有一个API端点，如果存在一个仅包含附加到请求的JWT的httponly cookie，则返回200 OK，否则将返回401 Unauthorized。
这是我尝试过的
// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root
浏览 4提问于2022-07-06得票数 1
回答已采纳
5回答
如何使用BehaviorSubject值作为方法的参数？
angular、typescript、behaviorsubject
我使用一个BehaviorSubject来保存一个与其他组件共享的变量(用户名)，它在我的模板上很好地显示用户名。但是，我希望能够在一个服务中使用我的BehaviorSubject的值，然后该值(用户名)被用作如下方法的参数:myMethod(用户名){ do突}。
问题似乎是，当调用方法时，BehaviorSubject值还没有准备好。我尝试在构造函数和ngOnInIt中调用该方法，如果我将它记录到控制台，它将显示它最初是未定义的，最后它用正确的(用户名)值进行日志记录。是否可以使用BehaviorSubject获得作为参数传递给方法的值？
在我的示例中，我有一个auth.service，它
浏览 0提问于2019-04-23得票数 1
回答已采纳
2回答
如何在home.component.html (Angular)中显示值userName
angular、router
如何在home.component.html中显示值userName？
home/home.component.html：
<p>
You are logged in! {{ userName }}
</p>
类HomeComponent home/home.component.ts：
import {AuthService} from './../auth/auth.service';
import {Component, OnInit} from '@angular/core';
import {FormGroup, Form
浏览 3提问于2018-01-19得票数 0
3回答
在角13 api调用中未定义响应模型参数。
angular、typescript、api、rxjs、httpclient
我正在进行POST api调用，以便使用httpclient在角13/TypeScript 4.4.4中进行用户身份验证。我可以检查响应模型的内容，它似乎还可以，但如果我访问模型的属性，它是未定义的。
这是反应模式：
import { UserAccountStatus } from "./Enums";
export interface AuthResponseModel {
UserLoginId: number;
AccountStatus: UserAccountStatus;
}
在这里，服务邮件呼叫：
import { HttpClient, Ht
浏览 3提问于2022-01-27得票数 0
回答已采纳
1回答
到底我的Validator类中的错误是什么，或者这个错误一直在我的控制台中发生的可观察的管道是什么？
angular、validation、angular-reactive-forms、angular-custom-validators
过了一段时间，我的控制台上不断出现错误。谁能告诉我这是因为片状的API吗？我是角质方面的初学者
异步Validator类：
import { AsyncValidator, FormControl } from '@angular/forms'
import { AuthService } from '../auth.service'
import { Injectable } from '@angular/core';
import { map, catchError } from 'rxjs/operators'
import
浏览 1提问于2021-01-08得票数 0
回答已采纳
2回答
而不是用户名，而是在记录角9时未定义的未定义的
angular、types、graphql
当我登录到username部分时，我遇到了这个问题，我得到了未定义的未定义的用户名，而不是来自我的数据库的用户名，但是当我刷新整个页面时，我得到了正确的用户名。我也不知道原因。我附上我的代码，因为我看不出我哪里错了：
auth.services.ts
import { IMeData, ISession } from '@core/services/interfaces/session.interface';
import { LOGIN_QUERY, ME_DATA_QUERY } from '@graphql/operations/query/user&#
浏览 11提问于2021-12-28得票数 0
1回答
Angular2唯一变量设置问题
angular、angular2-routing、angular2-services
因此，我一直在在线学习教程，并且有一个简单的登录组件，但似乎不像我所期望的那样工作？下面有一个登录组件：
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup } from '@angular/forms';
// Services
import { AuthService } from '../../_services/auth.service';
@Component({
浏览 2提问于2016-11-15得票数 0
回答已采纳
2回答
如何在页面加载前处理令牌？
node.js、angular、jwt
我使用JWT进行身份验证(没有登录页面)。我有一些问题，当站点加载时，首先是get方法，用于加载内容，然后是身份验证方法，并将令牌保存在本地存储中。
问题是我得到的错误，我没有通过身份验证，并在我刷新页面后，它的工作。我需要让他首先创建身份验证方法，并将其保存到本地存储中，然后加载页面。
Auth.service：
import { Injectable } from '@angular/core';
import { HttpService } from '../http/http.service';
import * as jwt_decode from &
浏览 0提问于2019-11-10得票数 1
1回答
如何以角显示从后端api接收的数据？
angular、angular-services、angular13、angular-observable、angular-arrays
我目前正在尝试在一个雇员登录到他的帐户后显示他的数据，我可以通过他的用户名从后端获取该雇员的数据，我可以通过控制台记录它，但是当我将数据分配给另一个变量时，任何I console日志都会导致这个变量没有定义。
我的服务档案：
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from '
浏览 13提问于2022-05-15得票数 0
回答已采纳
2回答
航路导航不能在9号角度工作。
javascript、angular、angular-ui-router
我正在做一个登录和家庭组件在我的角度应用程序。
登录服务正在验证用户的用户名和密码。
成功登录后，应该将用户重定向到主页。
但是路由器重定向不能正常工作。
登录组件
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from 'src/
浏览 2提问于2020-07-20得票数 4
回答已采纳
1回答
MockAuthService类型的参数在角上与AuthService不兼容
javascript、angular、jasmine、mocking
认证服务
import { Injectable } from '@angular/core';
import {HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http : HttpClient) { }
public validateUser(email:string, password: string):boolean{
this.h
浏览 0提问于2018-05-24得票数 0
2回答
角度2-从服务到组件的相同级别的事件
angular、events、authentication、angular-services、angular-components
我有一个身份验证服务，它会发出一个事件。当用户登录时(通过LoginComponent)，导航栏必须更新(NavBarComponent)。这些组件处于相同的级别。
首先我尝试使用EventEmitter，然后我看到我们不应该在服务中使用它。这是一种反模式。
所以我尝试了
auth.service.ts
import {Injectable} from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class AuthService {
浏览 4提问于2017-02-19得票数 0
回答已采纳
1回答
无法用我的登录角项目获取数据php后端
php、json、angular
我试图创建一个有角度的项目，但是当我尝试从php文件中获取数据时，它不允许我这样做，并且有一个错误，如
“类型‘Object’上不存在属性'success‘”。在if(data.success){“属性‘消息”类型’Object‘上不存在。“关于window.alert(data.message)
这是代码
这是我的loginComponent：
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Compo
浏览 1提问于2019-10-01得票数 1
回答已采纳
3回答
如何在promise中更新全局变量并返回到其他组件中使用
angular、typescript、global-variables、es6-promise、angular-promise
问题是我有一个想要显示的用户名，但无法从promise之外获取数据。
我制作了一个user.service.ts，并将其作为提供者包含在app.module.ts中。然后在app.component.ts中，我将user设置为等于返回的数据，但它不起作用。为什么不能像这样在promise中更新全局变量呢？
user.service.ts
import { Injectable } from '@angular/core';
import { AuthGuardService } from './auth-guard.service';
@Injectable(
浏览 0提问于2018-12-20得票数 0
1回答
如何仅为子模块注册Angular HttpInterceptor
angular、angular-httpclient、angular-http-interceptors
我在为Angular 7应用程序中的子模块注册HttpInterceptor时遇到了问题。我的意图是，只有从子模块执行的请求才会被拦截和调整。拦截器的代码如下。 import {Injectable} from "@angular/core";
import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from "@angular/common/http";
import {AuthService} from "../services/auth.service";
import
浏览 16提问于2019-02-22得票数 5
2回答
在成功登录到角6之后，我是否有办法创建基于角色的访问？
javascript、angular、typescript
我希望在登录时，检查管理类型，然后将其重定向到特定的组件，例如HOD应该访问admidashboard，cict应该访问admin2仪表板，等等。
这是我的猫鼬模式
const mongoose = require('mongoose');
const ClearAdminSchema = new mongoose.Schema({
email:
{
type:String,
required:true,
trim:true
},
password:{
type:String,
浏览 1提问于2019-10-21得票数 0
2回答
canLoad防护未获取更新值
angular、guard、angular-canload
UPD。解决了。我使用了一个服务的两个实例，它导致了问题 我被canLoad guard困住了。当我按下component中的一个按钮时，我想更改service中的false值，并让我的Guard加载一个模块。但是guard只接收一个假的值。我如何才能使它工作，并查看我何时更新服务中的值？看起来它看不到值何时被更改并在我更新它之前触发 这是我的AuthGuard import { Injectable } from '@angular/core';
import { CanLoad } from '@angular/router';
import { Aut
浏览 35提问于2021-10-11得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
