如何查看 angular 8 中的会话

Question

我已经使用 angular 8 和节点 js 创建了登录表单。我在后端使用节点 js 设置了会话。我无法在 angular 中检查是否设置了会话，以避免在未登录的情况下访问仪表板。请建议使用 angular 8 和节点 js 使用登录系统的方法。谢谢.....

Answer 1

一种非常流行的方法是使用 JWT（JSON Web Tokens）npm package 进行身份验证。

过程将是：

向服务器发送凭据
服务器生成并发回 JWT 或 Bearer Token
FrontEnd 会将其存储在浏览器 cookie 或 localStorage 中

localStorage.setItem('TOKEN', tokenReceivedFromServer);

在随后的 Api 调用中，令牌将在 Header（授权）中发送到服务器。

Authorization: `JWT ${localStorage.getItem('TOKEN')}`

仅供参考：JWT 关键字在解析令牌之前从服务器上的字符串中删除

前端可以检查令牌是否设置在存储中以显示登录页面/仪表板

Answer 2

首先我们需要检查应用程序中的登录凭据是否有效。

在angular应用程序组件打字稿文件中，我们在参数中发送了数据服务，该服务使用httpclient将值发送到后端。如果凭据有效，我们在本地存储中设置值。

submitLogin(data:any)
  {
    this.LoginService.loginData(data).subscribe(data =>{
      
      if(data.body.status_code == 404)
      {
        Swal.fire({
          icon: 'warning',
          title: 'Invalid E-Mail/Password!',
        }).then(function(){
          
        });
      }else if(data.body.status_code ==200)
      {
        localStorage.setItem("user_id",data.body.token);
        this.router.navigate(['/Dashboard']);
      }else
      {
        Swal.fire({
          icon: 'error',
          title: 'Process Failed!',
        }).then(function(){
        
        });
      }
    });
  }

在 service.ts 文件中确保导入这些包

import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import {Login} from './login';

在 loginData 函数中

url = "http://localhost:3000/loginCheck";

  loginData(Login:Login):Observable<any>
  {
    return this.http.post(this.url,Login,{observe: 'response'});
  }

在后端我使用了node.js

在文件中 app.js

首先安装 jsonwebtoken 包并包含在文件中。

npm install jsonwebtoken

然后where条件满足时设置jsonwebtoken

let payload = {subject:employee_id}
let token = jwt.sign(payload,'secretKey')

var response = { 
               'token': token,
               "status_code":200,
      }
                
res.send(response);
res.end();

每当我们在 angular 中使用登录时，我们必须使用 authguard 路由它的帮助以在不登录的情况下访问仪表板。

ng generate guard auth

在 auth.guard.ts 文件中我们必须包含包和服务

import { CanActivate, Router } from '@angular/router';
import {LoginService} from './login.service';

export class AuthGuard implements CanActivate {

  constructor(private LoginService:LoginService,private router:Router) {}

  canActivate(): boolean
  {
    if(this.LoginService.loggedIn())
    {
      return true
    }else
    {
      this.router.navigate(['/login']);
      return false;
    }
  }
  
}

在这个文件中，我们只是检查本地存储值是否设置为布尔数据类型。

在服务文件中

在boolean类型return中为get和return添加如下代码

loggedIn()
  {
    return !!localStorage.getItem('user_id')
  }


getToken()
      {
        return localStorage.getItem('user_id')
      }

如果 return 为真，我们可以访问仪表板，否则重定向到登录页面。

我们必须在路由中使用这个canActive函数，否则它不会工作

在应用程序中-routing.module.ts 文件

import { AuthGuard } from './auth.guard';

    const routes: Routes = [
  {path:'Dashboard',component:DashboardComponent},
  {path:'receipt',component:ReciptComponentComponent,canActivate:[AuthGuard]},
];

这将帮助我们在不登录的情况下访问仪表板，但我们需要在后端检查令牌是否有效，我们可以使用 angular 拦截器

我们应该使用拦截器名称创建新服务

ng g service token-interceptor

在拦截器文件中我们需要导入以下内容

import { Injectable,Injector } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';
import { LoginService } from './login.service';

在拦截器服务中，注入方式与组件不同。

export class TokenInterceptorService implements HttpInterceptor{

  constructor(private Injector:Injector) { }
  intercept(req:any,next:any)
  {
    let loginService = this.Injector.get(LoginService);
    let tokenzedReq = req.clone({
      setHeaders:
      {
        Authorization: `Bearer ${loginService.getToken()}`
      }
    });

    return next.handle(tokenzedReq)
  }
}

我们需要在拦截器中创建一个名为 intercept 的函数，然后我们需要根据注入器注入服务。

在后端我们需要创建辅助函数来验证 jsonwebtoken

如果未设置授权，我们可以发送 401 not found 响应并重定向到登录页面

function verifyToken(req,res,next)
{
    if(!req.headers.authorization)
    {
        return res.status(401).send('Unauthorized request');
    }

    var token = req.headers.authorization.split(' ')[1];

    if(!token)
    {
        return res.status(401).send('Unauthorized request');
    }

    if(token === 'null')
    {
        return res.status(401).send('Unauthorized request');
    }

    //let payload = jwt.verify(token,'secretKey');
let payload = jwt.decode(token,'secretKey');

    if(!payload)
    {
        return res.status(401).send('Unauthorized request');
    }

    req.userId = payload.subject;

    next();

}

那我们就可以在任何需要的地方使用这个中间件功能

例如

app.get('/dashboard',verifyToken,function(req,res){
    let events = [];
    res.json(events);
});

在仪表板组件 ts 文件中

this.dashboardService.getData().subscribe(data=>this.dashboardData=data,
      err=>{
        if(err instanceof HttpErrorResponse)
        {
          if(err.status===401)
          {
            this.router.navigate(['/login']);
          }
        }
      })

在仪表板服务 ts 文件中

 url = "http://localhost:3000/dashboard";

  getData()
  {
    return this.http.get<any>(this.url);
  }

在 app.module.ts 文件中

    import { AuthGuard } from './auth.guard';
    import { ReciptComponentComponent } from './recipt-component/recipt-component.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    import { TokenInterceptorService } from './token-interceptor.service';
    import { DashboardServiceService } from './dashboard-service.service';

在提供商中

 providers: [AuthGuard,{provide:HTTP_INTERCEPTORS,useClass:TokenInterceptorService,multi:true},DashboardServiceService],

如何查看 angular 8 中的会话

How to check session in angular 8

node.js

typescript

angular8