| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Protected Route</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <h1>Protected Route</h1> | |
| <p>Welcome, {{user}}!</p> | |
| <script> | |
| function retrieveAccessToken() { | |
| return localStorage.getItem("access_token"); | |
| } | |
| function getProtectedResource() { | |
| const token = retrieveAccessToken(); // Implement this function to get the stored token | |
| fetch('/protected', { | |
| headers: { | |
| 'Authorization': `Bearer ${token}` | |
| } | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok'); | |
| } | |
| return response.text(); // or response.json() if your server sends JSON | |
| }) | |
| .then(data => { | |
| // Handle the protected data | |
| console.log(data); | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |