登錄Angular和nodeJs＆postgreSQL

Question

我是使用angular和node.Js的新手，我擁有有用於登錄的組件的angular應用程序，而在后端，則具有服務器node.Js和postgreSQL，它具有表“ users”，如何使用戶登錄並獲取該數據從服務器？ 我的意思是，當用戶寫電子郵件和密碼並單擊登錄按鈕時，我需要加載他的數據。 我應該在后端做什么？ 任何建議/幫助將不勝感激。 謝謝

Answer 1

從Angular應用程序中，您可以將HTTP發布請求以及用戶的電子郵件ID和密碼發送到后端服務器。 在那里，您可以從數據庫表中獲取具有匹配電子郵件ID的用戶數據，並檢查密碼。 如果用戶退出並且密碼與用戶數據匹配，則返回成功，否則返回其他數據，例如-1，以表明它是未經授權的用戶。

Answer 2

您將需要執行一些步驟來執行此操作。

1）創建簡單的登錄表格：確定。

2）將用戶憑證發送到服務器。 這是您可以從組件中使用的簡單登錄服務

@Injectable()
export class LoginService {

  constructor(private http: HttpClient, private userStorage: UserStore) {
  } 

 async login(credential: { email: string, password: string }): Promise<boolean> {
    try {
      const token = await this.http.post('/auth/authenticate', credential, { responseType: 'text' })
        .pipe(share()).toPromise();
      this.userStorage.setToken(token);
      return true;
    } catch (err) {
      if (err.status !== HttpStatus.FORBIDDEN) {
        throw err;
      }
      return false;
    }
  }

在這里，您可以使用用戶信息在POST中調用服務器，此服務器會為您提供一個加密令牌，使您可以根據自己的權限訪問API函數。 令牌通常如下所示：

不記名eozaeza3e232az3eaze23zaeeo （標准身份驗證令牌）

我們將此令牌保存在“商店”中，例如可以是localstore / cookie。 您可以創建一個角度服務來處理此問題。 在這里我叫他UserStore

3）在服務器端，您現在需要驗證在“ POST”請求中收到的用戶憑證。 因此，您只需在用戶數據庫中發出一個sql請求，以查看是否找到了他（請不要忘記在數據庫中加密密碼 ）。 如果您找不到他，則發送不良的憑據回復。

4）找到用戶后，您需要創建一個令牌。 您可以使用https://github.com/auth0/node-jsonwebtoken進行此操作。 令牌是代表用戶信息的簡單加密對象。 這是創建一個的方法：

const jwtToken = jwt.sign({
          email: account.email,
          givenName: account.givenName,
          role: account.role
        }, Config.get().AUTH_JWT_KEY, { expiresIn: 3600 });

Config.get（）。AUTH_JWT_KEY只是一個簡單的哈希字符串，表示用於加密令牌的“密碼”。 令牌的正面不應該是未加密的 ，請將此密鑰放在背面。

5）服務器給您200，您就有了令牌:)。 現在，您可以使用它來調用API的受限端點。 為此，您需要在請求標頭中添加此令牌。 在角度上，我們稱之為攔截器 。 當您發送http請求或響應時，該服務將用於執行某些操作。 多虧他，您才能在每個請求中添加令牌。

您可以在此處找到一些代碼： 如何處理Angular 6中的401未經身份驗證的錯誤

6）您的服務器現在將需要讀取此令牌，以了解您的用戶是否可以訪問某個端點。 由於密鑰“ Config.get（）。AUTH_JWT_KEY”，他將需要“解密”用戶給他的令牌。 使用jsonwebtoken

const account = jwt.verify(token, Config.get().AUTH_JWT_KEY);

在這里您擁有您的帳戶，您現在可以檢查您的用戶權限，看看他可以做什么：D

7）最后一小部分。 您還需要“保護”您的前台，以避免人們在未登錄時訪問頁面。 您可以在使用防護裝置的角度路由器上檢查canActivate屬性。 這是一個例子

const appRouter: Routes = [
  { path: 'login', component: LoginPage },
  {
    path: 'app', component: AppPage, canActivate: [EnsureUserAuthGuard], resolve: { user: UserResolve },
    children: [
      { path: 'home', component: HomePage },
      { path: 'content', component: ContentPage }
    ]
  }]

要訪問我的應用程序（應用程序）頁面（主頁/內容），您需要傳遞SecureUserAuthGuard。 這是一項簡單的服務，它將檢查用戶在存儲中是否具有令牌。 如果用戶沒有令牌，他將被重定向到登錄頁面

@Injectable()
export class EnsureUserAuthGuard implements CanActivate {

  constructor(private userStore: UserStore,
    private router: Router) {
  }

  canActivate() {
    if (!lodash.isEmpty(this.userStore.getToken())) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}