Angular策略模式,使用DI,在组件/服务层面而不是模块(本地,会话存储)。
i将数据存储在浏览器的本地和会话存储中.实施本地和会话存储服务的好设计实践是什么? 我有用于处理JSON的通用服务. @Injectable() export class StorageService { private storage: any; constructor() { this.storage = sessionStorage; } public retrieve(key: string): any { const item = this.storage.getItem(key); if (item && item !== 'undefined') { return JSON.parse(this.storage.getItem(key)); } return; } public store(key: stri
0 2024-02-21
编程技术问答社区
在本地存储中保存一个视频
ATM我将简单的字符串保存在本地存储中.但是问题现在是我要将视频/图像保存到本地存储中.但是,由于LocalStorage仅支持字符串,所以我看不出这是怎么可能的. 如果您可以提供很好的代码示例! File input
0 2024-02-21
编程技术问答社区
用Angular将图像转换为字符串
我将图像转换为带有以下代码的字符串.当我包含一些调试器语句时,转换有效.当我删除它们时,它停止工作. 这是我的github github链接 我在这里缺少什么? export class ImageUploaderComponent implements OnInit { public context: CanvasRenderingContext2D; @ViewChild('mycanvas') mycanvas; preview(e: any): void { const canvas = this.mycanvas.nativeElement; const context = canvas.getContext('2d'); context.clearRect(0, 0, 300, 300); // show image to canvas const render = new FileReader(); re
0 2024-02-21
编程技术问答社区
Angular 7 Guard重定向只在双击时工作
问题在于我已经实施了一个警卫,旨在与特定目录一起使用.如果当前用户名等于2,则应返回true.如果不是,则不应重定向. 这是我的app-routing-module.ts文件,问题在"用户列表"路径中,如果我们实现了[proleguard] Canactivate import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { Routes, RouterModule, Router } from '@angular/router'; import { PokemonListComponent } from '../../src/app/pokemon-list/pokemon-list.component'; import {LoginComponent} from '../../src/app/login/login.component'
0 2024-02-21
编程技术问答社区
Angular2 如何在HTML5模板内显示localStorage的值?
我在LocalStorage中存储了2个键,我想在模板中显示其中一个.我无法访问这些值.我什至创建了一个接口,只是为了存储LocalStorage的CurrentUser键的值.应该如何实施? 这是当前代码: 服务 import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import { Md5 } from 'ts-md5/dist/md5'; import { User } from './user'; import 'rxjs/add/operator/map'; @Injectable() export class VehicleService { private defUrl = 'dummy-url.com'; constructor(private http: Http) { } getVehicle(username?
0 2024-02-21
编程技术问答社区
angular 4-当在一个打开的标签中注销时,在所有标签中自动注销。
在一个打开选项卡中登录时,我想自动从所有打开选项卡上注销. 我将JWT令牌设置为登录时的localstorage,并在注销时删除令牌. 如何使用存储事件从所有打开选项卡上注销? 解决方案 您可以在存储中添加事件侦听器: window.addEventListener('storage', (event) => { if (event.storageArea == localStorage) { let token = localStorage.getItem('jwt_token'); if(token == undefined) { // you can update this as per your key // DO LOGOUT FROM THIS TAB AS WELL this.router.navigate(['/']); // If you are using router //
0 2024-02-21
编程技术问答社区
如何在angular universal中使用localStorage?
我正在使用@Angular V4.0.3和WebPack 2.2.0. 使用中进行局部存储的任何模块 解决方案 一种好方法是使localStorage注射并为其提供不同的实现. 一个抽象类,反映 API 可以用作令牌: export abstract class LocalStorage { readonly length: number; abstract clear(): void; abstract getItem(key: string): string | null; abstract key(index: number): string | null; abstract removeItem(key: string): void; abstract setItem(key: string, data: string): void; [key: string]: any; [index: nu
0 2024-02-21
编程技术问答社区
Angular 2的认证状态
我已经使用Angular2实现了登录页面.我正在将此信息存储在LocalStorage中,以便我可以随时访问它并保持登录状态,如果用户刷新页面. authservice.ts import {Injectable} from "@angular/core"; @Injectable() export class AuthService { redirectUrl: string; logout() { localStorage.clear(); } isLoggedIn() { return localStorage.getItem('token') !== null; } isAdmin() { return localStorage.getItem('role') === 'admin'; } isUser() { return localStorage.getItem('role') === 'u
0 2024-02-21
编程技术问答社区
适当的本地存储为Ionic 3
我正在阅读有关当地存储的信息,我很困惑.如我所见,有两个选择: 本地存储,导入{nativestorage} 离子存储,导入{ionicstorageModule} 我的应用程序是使用离子3开发的,我正在尝试从Parse Server检索它后,试图保存一系列对象. 用离子1我存储这样的对象数组: setUsers (users){ window.localStorage.users_data = JSON.stringify(users); } getUsers(){ return JSON.parse(window.localStorage.users_data || '[]'); } 所以,现在,保存我的数据并将其字符串并解析的最佳选择是什么? 本地存储或离子存储? 非常感谢 解决方案 您可以轻松使用 ionic 用法: // set a key/value storage.set('name', 'Max');
0 2024-02-21
编程技术问答社区
ERROR in Metadata version mismatch for module /node_modules/angular2-cool-storage/index.d.ts, found version 4, expected 3,
我在运行ng build命令时要低于错误. 删除了Node_modules文件夹和NPM Installe,以下警告 npm WARN angular2-cool-storage@3.1.2 requires a peer of @angular/core@5.0.0 but none was installed. npm WARN angular2-cool-storage@3.1.2 requires a peer of @angular/common@^5.0.0 but none was installed. 且用于ng构建ID Deetail错误: 元数据版中的错误模块不匹配 /node_modules/angular2-cool-storage/index.d.ts,找到版本4, 预期3,在/src/app/app.module.ts中解决符号appmodule 在/src/app/app.module.ts 中解决符号appmodule package.
0 2024-02-21
编程技术问答社区
Angular 2/4在哪里存储token
我有一个用于生成令牌的REST API,我在Angular 4客户端使用,但是问题是在哪里存储此令牌. 在互联网中,我发现我可以存储在本地存储或cookie中. 所以我的问题是,如果商店令牌是本地存储,我刚刚从另一个浏览器复制了有效的令牌,那么我将有一个有效的令牌,因此有任何存储令牌的安全性,并且基本上与cookie一样,或者也许我错过了一些重要的信息? 解决方案 这是一篇有关令牌/cookie的完整文章,可以为您提供有关此主题的很多知识: auth0:cookies vs dokens 我会引用最重要的部分,以使您了解接下来的事情: 面对网站的两个最常见的攻击向量是跨站点脚本(XSS)和跨站点请求伪造(XSRF或CSRF). 跨站点脚本)攻击发生时,当外部实体能够在您的网站或应用中执行代码. 如果您将JWT和本地存储使用JWT,则跨站点请求伪造攻击不是问题.另一方面,如果您的用例要求您将JWT存储在cookie中,则需要保护XSRF.
0 2024-02-20
编程技术问答社区
如何在Angular中销毁一个localStorage项目?
我想在路由到其他组件时删除或破坏我的localstorage内容.我想实现这一目标,以免局部存储变量存储以前的值,即使是新值也出现. 我在正确的道路上吗? 游戏组件 export class Game implements OnDestroy{ constructor(){ this.currentGame = JSON.parse(localStorage.getItem('currentGame')); } ngOnDestroy(){ this.currentGame = null; } } 解决方案 您可以使用 localStorage.removeItem('currentGame'); 另外,您也可以用 清除整个局部距离 localStorage.clear();
0 2024-02-20
编程技术问答社区
如何获得存储在localStorage中的对象的值?
我在localstorage中存储了一个具有多个属性的对象.它不包含单个值或数字等单个值. localstorage键的名称为UserData,其值是以下对象: { key: "1287C31D714BE16FBD44D093E4173CFF" logTime: "20191013190439" operatorDni: "46653980" } 我需要检索对象属性operatorDni的值,以便在代码中执行一些操作.我试图使用以下代码来检索它: operatorDni: string; this.operatorDni= localStorage.getItem('UserData.operatorDni'); 但我得到null. 如何用键在localStorage中获得对象的属性?我在做什么错? 非常感谢. 解决方案 使用JSON.parse喜欢 var userData= JSON.parse(loca
0 2024-02-20
编程技术问答社区
浏览器刷新后Angular2保留敏感信息
我的登录操作是否会返回有关用户是否为管理的信息,例如(isAdmin: true)我可以在组件之间保留此信息,直到浏览器刷新或类似操作为止.但是我在浏览器刷新后丢失了这些信息.我很困惑如何保留此值. 我正在使用localStorage和sessionStorage来保存一些非敏感信息.但是此信息很敏感,不应允许用户编辑/查看此值. 有什么方法可以使用Angular2? 解决方案 我会在应用程序启动时对服务器或用户信息提供信息的位置.因此,当我刷新应用程序时,我会亲眼获取信息,而不必将其存储在会话中,我只是将数据存储在对象中并使用它. 登录生成代币并将其保存在会话中时,并将其与我之前提到的API调用一起发送. 那将是我的方法: 登录 - >生成令牌 存储令牌 api调用获取用户的信息传递令牌(在app init) 希望它对您有所帮助或至少给您一些有价值的想法...让我们知道您如何解决问题! :D 其他解决方案 您不能信任客户.您可以创
0 2024-02-20
编程技术问答社区
当浏览器在angular中关闭时,清除本地存储。
我创建了一个Angular 5应用程序.这是使用基于令牌的系统.目前我正在将令牌存储在LocalStorage中.我希望浏览器关闭时局部孔隙清晰.当浏览器刷新时,无法清楚局部存储.我不使用sesionStorage的原因是因为在新标签或窗口中打开页面会导致启动新的会话.我该如何完成此操作,然后在app.ponent 中尝试使用此代码 @HostListener('window:beforeunload', ['$event']) beforeunloadHandler(event) { alert("KKk") localStorage.removeItem('authToken'); } ,但是当浏览器关闭时,它不会发射.实现此用例的最佳方法是什么.如果代币 ,使用cookie存储是一种很好的方法 解决方案 您应该这样做... import { Component, HostListener } from "@angular/core"; @Compo
0 2024-02-20
编程技术问答社区
关注LocalStorage angular2的变化
我在localstorage和ngoninit钩中存储了一些对象,我将此数据接收到我在模板中使用 *ngfor显示的数组.如何观看LocalStorage的更改并自动更新视图? 解决方案 您想要的是一个主题.在此处查看文档(For a quick example, something like this: @Injectable() export class StorageService { ... private storageSub= new Subject(); ... watchStorage(): Observable { return this.storageSub.asObservable(); } setItem(key: string, data: any) { localStorage.setItem(key, data); this.storageSub.next('changed'); } removeItem(key) { lo
0 2024-02-20
编程技术问答社区
如何在浏览器的存储空间中存储一个对象(类的类型)并将其检索出来?
我想在我的Angular 2应用程序中拥有页面录制的证明类实例. 在我的组件的.ts文件中我有类: export class AComponent implements OnInit { foo: Foo = new Foo(); ngOnInit() { // This will always be 12, it would be nice if it would increase with each page refresh. this.foo.bar.baz += 1; console.log("baz: " + this.foo.bar.baz); } } class Bar { baz: number = 11; } class Foo { bar: Bar = new Bar() } 我知道localStorage ES6东西可以存储字符串.我必须写自己对复杂类对象的避难所化吗? 像(我想)在这里建议: Angu
0 2024-02-20
编程技术问答社区
如何实现一个记住我的功能?
我正在使用节点JS后端进行Angular 4应用程序.我做了登录表格,一切都很好,我想实现"记住我"功能. 这是我的登录服务: import { Injectable } from '@angular/core'; @Injectable() export class loginService{ rememberMe: boolean; constructor() { } login(credentials) { sessionStorage.setItem('Name', credentials.firstName); sessionStorage.setItem('token', credentials.token); } getCostumer() { const user = { Name: sessionStorage.getItem('firstName'), token: sessionStorage.getItem(
0 2024-02-20
编程技术问答社区
localStorage没有定义(Angular Universal)。
我正在使用 Universal-Starter 作为骨bone. 当我的客户端启动时,它会从LocalStorage中读取有关用户信息的令牌. @Injectable() export class UserService { foo() {} bar() {} loadCurrentUser() { const token = localStorage.getItem('token'); // do other things }; } 一切都很好,但是我在服务器端(终端)中得到了此功能: 异常:参考:未定义localstorage 我从说我现在有这两个文件: main.broswer.ts export function ngApp() { return bootstrap(App, [ // ... UserService ]); } main.node.ts export
0 2024-02-20
编程技术问答社区
如何在Angular 2中把令牌存储在本地或会话存储中?
我想使用本地或会话存储来保存 angular 2.0.0. 中的身份验证令牌,我使用 angular2-localstorage ,但它仅起作用 Angular 2.0.0-- rc.5 ,当我在2.0.0中使用它时,通过我 type 错误.我想使用Angular 2.0.0的默认本地存储. 解决方案 保存到本地存储 localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name })); 从本地存储中加载 var currentUser = JSON.parse(localStorage.getItem('currentUser')); var token = currentUser.token; // your token 有关更多信息,我建议您通过本教程: angular 2 jwt身份验证示例和教程 其他解决方案 完全取决于您完全需要什么. 如果您只需要
0 2024-02-20
编程技术问答社区