• [Angular & Web] Retrieve user data from Session


    Once user sign up, we store the user data inside cookie in the broswer and also keep a memory copy in the server. 

    If next time, user refresh the page, we want to tell that the user is already authed.

    Create a endpoint, to retrive the user data:

    app.route('/api/user')
      .get(getUser);

    Router:

    import {Request, Response} from 'express';
    import {sessionStore} from './session-store';
    
    export function getUser(req: Request, res: Response) {
      // Get sessionid from cookies
      const sessionId = req.cookies['SESSIONID'];
      // get user according to the session id from the session storage
      const user = sessionStore.findUserBySessionId(sessionId);
      if (user) {
        // if there is user, send successful response
        res.status(200).json(user);
      } else {
        // if there is no user, send empty response
        res.sendStatus(204);
      }
    }

    SessionStorage:

    import {Session} from './session';
    import {User} from '../src/app/model/user';
    class SessionStore {
      private sessions: {[key: string]: Session} = {};
    
      createSession(sessionId: string, user: User) {
        this.sessions[sessionId] = new Session(sessionId, user);
      }
    
      findUserBySessionId(sessionId: string): User | undefined {
        const session = this.sessions[sessionId];
        const isSessionValid = session && session.isValid();
        return isSessionValid ? session.user : undefined;
      }
    }
    
    // We want only global singleton
    export const sessionStore = new SessionStore();

    On the client, once page loaded, we try to get user data first.

    import { Injectable } from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    import {Observable} from 'rxjs/Observable';
    import {User} from '../model/user';
    import {BehaviorSubject} from 'rxjs/BehaviorSubject';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/shareReplay';
    import 'rxjs/add/operator/filter';
    import 'rxjs/add/operator/do';
    
    export const ANONYMOUS_USER: User = {
      id: undefined,
      email: ''
    };
    
    @Injectable()
    export class AuthService {
    
      subject = new BehaviorSubject<User>(undefined);
      // filter out undefined user
      user$: Observable<User> = this.subject.asObservable().filter(user => !!user);
      isLoggedIn$: Observable<boolean> = this.user$.map(user => !!user.id);
      isLoggedOut$: Observable<boolean> = this.isLoggedIn$.map(isLoggedIn => !isLoggedIn);
    
    
      constructor(private http: HttpClient) {
        this.http.get<User>('/api/user')
          // when there is valid session id, emit the user$
          .subscribe((user) => this.subject.next(user ? user : ANONYMOUS_USER));
      }
    
      signUp(email: string, password: string) {
        return this.http.post<User>('/api/signup', {
          email,
          password
        }).shareReplay()
          .do((user) => this.subject.next(user));
      }
    
    }
  • 相关阅读:
    C语言常用函数-ispunct()判断字符是否为标点符号函数
    C语言常用函数-isupper()判断字符是否为大写英文字母函数
    C语言常用函数-isprint()判断字符是否为可打印字符(含空格)函数
    C语言常用函数-islower()判断字符是否为小写英文字母函数
    C语言常用函数-isgraph()判断字符是否为除空格外的可打印字符函数
    get请求多参数循环拼接
    数据库字段转驼峰命名
    React钩子函数问题,解决父组件实时更新子组件的值
    关于react 父级组件更新数据触发子组件更新渲染问题
    Jquery的ajax 方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7475899.html
Copyright © 2020-2023  润新知