Fullstack-kehitys

Notes PHP (2/2)

Frontend

notesService.js

Määritellään url-osoite

const baseUrl = 'http://localhost:8888/api/notes'

notesService.js

Määritellään url-osoitteet

const registerURL = 'http://localhost:8888/api/register';
const loginURL = 'http://localhost:8888/api/login';
const meURL = 'http://localhost:8888/api/me';

Tieto kirjautumisesta käsitellään istunnon kautta. PHP tarvitsee header-tietoon asetuksen 'withCredentials'

const makeHeader = () => {
    //let header =  {headers: {Authorization: `bearer ${token}`}}
    let header = { withCredentials: true }
    return header;
}

Tarkistetaan kirjautuminen me-toiminnon avulla:

const me = () => {
    // get: url, config
    const request = axios.get(meURL, makeHeader())
    return request.then(response => response.data)
}  

Uloskirjautuminen kutsuu logout-toimintoa joka poistaa session:

const logout = () => {
    // post: url, data, config
    const request = axios.post(logoutURL, null, makeHeader())
    return request.then(response => response.data)
}  

App.jsx

Se onko käyttäjä kirjautunut käsitellään me-toiminnon kautta

const userHook = () => {
userService.me()
  .then(response => {
	console.log("me", response)
	if (response.id === null) {
	  setUser(null)
	}
	else {
	  setUser(response)
	}
  })
  .catch(error => {
	if (error.response && error.response.status === 401) {
	  // not logged in = normal state
	  setUser(null)
	} else {
	  console.error("Unexpected error in /api/me:", error)
	}
  })
}

Uloskirjautumisen täytyy nyt kutsua backendiä:

const logoutHandler = () => {
  userService.logout()
    .then(response => {
      console.log(response)
      setUser(null)
      notesService.setToken(null)
    })
    .catch(error => console.log(error))
}  

Julkaisu cPanelin avulla

Yleistä

• tee build React-projektistasi, varmista oikeat polut tätä ennen service-tiedostoissasi.
• tee cPanelissa alidomain
• siirrä alidomainin juurihakemistoon buildin tiedostot
• tee alikansio /api ja siirrä tänne backendin PHP-tiedostot.

.htaccess

Juurihakemiston .htaccess

RewriteEngine On

# Älä koske API-pyyntöihin
RewriteRule ^api(/.*)?$ - [L]

# React SPA routing
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

/api -kansion .htaccess:

RewriteEngine On

# Kaikki API-pyynnöt index.php:lle
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [L]