PHP Session在Angular 6项目中不起作用 [英] PHP Session doesn't work in Angular 6 project

问题描述

我在前端使用的是angular 6，在后端(WAMP)使用的是PHP，我想创建一个登录系统.当有人输入有效的凭据时，我希望他被重定向到 http://localhost:4200/home

I am using angular 6 for frontend and PHP for backend (WAMP) and I want to make a login system. When someone enters valid credentials I want him to get redirected to http://localhost:4200/home

我有 auth.php ，当有人输入有效的用户名/密码时可以设置会话变量，而 verify.php 可以检查是否设置了会话变量. 尽管该应用将我重定向到首页，但是verify.php无法看到会话变量.

I have auth.php which sets the session variables when someone enters valid username/password and verify.php to check if the session variables are set. Although the app redirects me to home, verify.php can not see the session variables.

这些是我的文件:

login-form.component.ts

loginUser(event) {
const target = event.target;
const username = target.querySelector('#username').value;
const password = target.querySelector('#password').value;

this.Auth.login(username, password).subscribe(data => {
  if(data.success) {
    this.router.navigate(['/home']);
  }
  else {
    window.alert(data.message);
  }
});
}

从html获取用户名和密码，并将其发送到服务

which takes the username and password from html and sends it to the service

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'

interface myData {
  success: boolean,
  message: string
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http: HttpClient) { }

  login(username, password) {
     return this.http.post<myData>('http://localhost/angular6-app/api/auth.php', {username, password}, 
    {
      headers : {
          'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
      } 
    })

  }

auth.php

include 'config.php'; 
header('Access-Control-Allow-Origin: http://localhost:4200'); 

$postdata = file_get_contents("php://input");
if(isset($postdata) && !empty($postdata)) {

    $request = json_decode($postdata);
    $username = $request->username;
    $password = $request->password;
    $sql = "select * from user where username = '$username'";
    $result = $conn->query($sql);              
    $row = $result->fetch_assoc();

    if($row['username'] == $username && password_verify($password, $row['password'])) //kanei verify me to hash pou exei ginei
        {
            $_SESSION['username'] = $username;  
            $_SESSION['loggedin'] = true;
            ?>
            {
                "success": true,
                "message": "You have logged in"
            }
            <?php
        }
    else {
        ?>
        {
            "success": false,
            "message": "Invalid credentials"
        }
        <?php
        }
}

?>

最后是 verify.php

<?php
session_start();
header('Access-Control-Allow-Origin: http://localhost:4200');

if (isset($_SESSION['loggedin'])) {
    ?>
    {
        "success": true,
        "message": "You have the right."

    } 
    <?php
}
else {
    ?>
    {
        "success": false,
        "message": "You DONT have the right."
    }
    <?php
}

?>

我的 home.component.ts 具有此类，我想在html中显示您拥有权利"，但由于变量 loggedin <，它显示您没有权利" /em>未定义.

My home.component.ts has this class and I want to display in html "You have the right" but it displays "You DONT have the right" because the variable loggedin is undefined.

export class HomeComponent implements OnInit {

  message = "Loading..."

  constructor(private user: UserService) { }

  ngOnInit() {
    this.user.getSomeData().subscribe(data => {
      this.message = data.message;
    })
  }

getSomeData()在 user.service.ts

getSomeData() is implemented in user.service.ts

getSomeData() {
    return this.http.get<myData>('http://localhost/angular6-app/api/verify.php');
  }

是否可以通过会话解决此问题，还是必须使用另一种方法来检查角度?

Is there a way to fix this problem with session or do I have to use another method of checking in angular?

谢谢.

推荐答案

您不能在一个域上设置SESSION并在另一个域上使用，从代码中可以明显看出您正在使用两个不同的端口(如果要使用会话) javascript和PHP必须在相同的域/端口上.

You can't set SESSION on one domain and use on other domain, From your code it's clear you are using two different port, if you want to use sessions javascript and PHP must be on the same Domain/ports.

如果要使用其他域/端口，则必须找到其他方式，例如基于令牌的auth，即在成功登录后在auth.php中创建将保存在数据库中的令牌，并在成功后将其发送回去回复.

If you want to use different domains/ports then you have to find other ways like token based auth, i.e in auth.php after successful login create a token which will be saved in your database, send back that token in your successful response.

用您的角度将令牌保存到存储中(或在您喜欢的任何地方)，并使用该令牌从PHP API中检索使用数据.

in your angular save that token to storage ( or wherever you prefer ) and retrieve use data from your PHP API using that token.

因此，当您在 user.service.ts 中进行呼叫时，您的URL应包含令牌

so when you do a call in user.service.ts your URL should contain the token

YOUR_TOKEN = '1234'//received after successfull login and saved in local storage
return this.http.get<myData>('http://localhost/angular6-app/api/verify.php?token='+YOUR_TOKEN);

在您的 verify.php

$token = $_GET['token'];
// check if token is valid in your database and send response

p.s在注销时请确保过期或从angulare存储和数据库中删除令牌.

p.s when logout make sure to either expire or delete token from angulare storage and database.

这篇关于PHP Session在Angular 6项目中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！