我是Angular的新手。
我想限制未在我的应用中登录的用户，我在LocalStorageService会话变量中登录了用户的信息。
authenticate(x)
{
this.authService.authenticate(x)
.subscribe(data => {
this.session_data = data;
//console.log(this.session_data[0]);
if( data.user_email !== '')
{
const email: any = {'email': this.session_data[0].user_email}
this.get_user_id(email);
this.router.navigate(['dashboard']);
}
//console.log(this.session_data);
this.session.store('session_data', this.session_data);
})
}
通过使用this.session_data = this.session.retrieve('session_data');，我在仪表板页面中检索该变量。
现在，我需要：
我已经经历了很多相同的事情，但我想使用最好的做法。我应该使用什么，我应该如何实现它？
这是我的app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { URLSearchParams, Http, HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { Ng2Webstorage } from 'ng2-webstorage';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormlistComponent } from './formlist/formlist.component';
import { ControlMessageComponent } from './control-message.component';
import { ValidationService } from './validation.service';
import { ParticlesModule } from 'angular-particle';
import { FillformComponent } from './fillform/fillform.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { AuthService } from './auth.service';
export const routes: Routes = [
{ path: '', component: LoginComponent },
{ path: 'dashboard', component: DashboardComponent },
//{ path: 'dashboard/user', component: DashboardComponent },
{ path: 'dashboard/formlist', component: FormlistComponent},
{ path: 'dashboard/fillform/:form_id', component: FillformComponent }
];
@NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent,
FormlistComponent,
ControlMessageComponent,
FillformComponent,
LandingPageComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
ReactiveFormsModule,
FormsModule,
HttpModule,
Ng2Webstorage,
ParticlesModule,
BrowserAnimationsModule
],
providers: [ValidationService,AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }
这是我的logincomponent
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { LocalStorageService } from 'ng2-webstorage';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: [],
providers: [AuthService]
})
export class LoginComponent implements OnInit {
filePath: string;
session_data: any = {};
message: string;
user_id: any;
userForm: any;
myStyle: object = {};
myParams: object = {};
width: number = 100;
height: number = 100;
constructor( private authService: AuthService,
private router : Router,
private session: LocalStorageService,
private formBuilder: FormBuilder) {
this.filePath="../assets/img/user_img.png",
this.userForm = this.formBuilder.group({
'username': ['', Validators.required],
/*'password': ['', [Validators.required, Validators.minLength(8)]]*/
'password' : ['',[Validators.required]]
});
//console.log(this.userForm);
}
saveUser() {
//console.log(this.userForm.value)
if (this.userForm.dirty && this.userForm.valid) {
//alert(`UserName: ${this.userForm.value.username} Password: ${this.userForm.value.password}`);
}
}
ngOnInit()
{
console.log('it works... !!')
this.myStyle = {
'position': 'fixed',
'width': '100%',
'height': '100%',
'z-index': 1,
'top': 0,
'left': 0,
'right': 0,
'bottom': 0,
};
this.myParams = {
particles: {
number: {
value: 50,
},
color: {
value: '#fffff'
},
shape: {
type: 'triangle',
},
}
};
}
get_user_id(email)
{
this.authService.get_user_id(email)
.subscribe(id => {
//console.log(id.user_id)
this.session_data[0].user_id = id.user_id;
})
}
authenticate(x)
{
this.authService.authenticate(x)
.subscribe(data => {
this.session_data = data;
//console.log(this.session_data[0]);
if( data.user_email !== '')
{
const email: any = {'email': this.session_data[0].user_email}
this.get_user_id(email);
this.router.navigate(['dashboard']);
}
//console.log(this.session_data);
this.session.store('session_data', this.session_data);
})
}
}
这是我的服务。
// auth.service.ts
import { Injectable } from '@angular/core';
import { URLSearchParams, Http, HttpModule, Response, Headers } from '@angular/http';
import { Router, CanActivate } from '@angular/router';
import 'rxjs/add/operator/map';
@Injectable()
export class AuthService implements CanActivate {
constructor(private http: Http, private router: Router) { }
canActivate()
{
if (this.isLoggedIn) { return true; }
this.router.navigate(['/login']);
return false;
}
authenticate(user_creds)
{
//console.log(user_creds);
const header = new Headers();
header.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('http://localhost/valuesassessment/api/login/authenticate_login', user_creds, { headers: header })
.map((res: Response) => res.json());
}
get_user_id(email)
{
//console.log(email)
const header = new Headers();
header.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('http://localhost/valuesassessment/api/forms/get_user_id', email, { headers: header })
.map((id: Response) => id.json());
}
get_forms_to_fill(user_id)
{
//console.log(user_id)
const header = new Headers();
header.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('http://localhost/valuesassessment/api/forms/get_forms_to_fill', user_id, { headers: header })
.map((form_ids: Response) => form_ids.json());
}
get_questions()
{
const header = new Headers();
header.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('http://localhost/valuesassessment/api/forms/fetch_questions', {}, { headers: header })
.map((questions: Response) => questions.json());
}
submit_score(score)
{
const header = new Headers();
header.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('http://localhost/valuesassessment/api/forms/submit_scores', score, { headers: header })
.map((scores: Response) => scores.json());
}
logout(LSkey)
{
const header = new Headers();
header.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post('http://localhost/valuesassessment/api/login/logout', LSkey, { headers: header })
.map((logout: Response) => logout.json());
}
}
这是我的仪表板组件
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'ng2-webstorage';
import { AuthService } from '../auth.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: []
})
export class DashboardComponent implements OnInit {
logoIMG: string;
logoutIMG: string;
userIMG: string;
organisationIMG: string;
empathyIMG: string;
accountabilityIMG: string;
message: string;
userEmail: string;
session_data: any = {};
user_image_url: string = "https://intranetlive.s3-us-west-1.amazonaws.com/uploads/profile/220x220/";
form_details: any ={};
constructor( private router : Router, private session: LocalStorageService, private authService: AuthService ) {
this.logoIMG = "../assets/img/logo.svg"
this.logoutIMG = "../assets/img/logout.svg"
this.userIMG = this.userIMG
this.organisationIMG = "../../assets/img/ic-organization.png"
this.empathyIMG = "../../assets/img/ic-empathy.png"
this.accountabilityIMG = "../../assets/img/ic-accountability.png"
this.session_data = this.session.retrieve('session_data');
console.log(this.session_data)
}
ngOnInit()
{
if (this.session_data[0].length == 0)
{
console.log('It`s on Dashboard...!!')
this.router.navigate(['']);
}
//this.userIMG = this.user_image_url+this.session_data[0].user_profile_picture
console.log(this.session_data)
}
go_to_fromsList()
{
this.get_forms_to_fill()
this.router.navigate(['dashboard/formlist']);
}
get_forms_to_fill()
{
const user_id: any = {'user_id': this.session_data[0].user_id}
this.authService.get_forms_to_fill(user_id)
.subscribe(form_details => {
//console.log(form_details)
this.session.store('form_detail', form_details);
})
}
logout()
{
const LSkey: any = {'LSkey': this.session_data.session_key}
this.authService.logout(LSkey)
.subscribe(logout => {
//console.log(logout.logged_out)
if(logout.logged_out == true)
{
this.session.clear();
this.session.store('session_data', {});
this.router.navigate([''])
}
})
console.log(this.session)
console.log(this.session_data)
}
}
答案 0 :(得分：0)
您应该针对此方案尝试并实施Angular Guards。Documenation
我们可以使用四种不同的防护类型来保护我们的路线：
的实时实施CanActivate - 决定是否可以激活路线
CanActivateChild - 决定路线的子路线是否可以 激活
CanDeactivate - 决定是否可以停用路线
CanLoad - 决定是否可以延迟加载模块