What is the best way to access an external website from your code

I am currently working on an application using Angular 6, and I have encountered a scenario with two URLs.

The first URL (url 1) is , while the second URL (url 2) is .

In this setup, users who are logged in via url 1 should only be able to redirect to url 2.

However, if a user directly enters the URL , they should be redirected to for the login process.

To handle this logic, I am using the following code snippet:

if (localStorage.getItem("isLoggedIn") === "true") {
  return true;
} else {
  window.location.href = "authentication.hello.com";
}

Additionally, I have included:

window.location.href = "authentication.hello.com";

to ensure redirection to the authentication page if the user is not logged in.

One issue I am facing is that when a user directly accesses , the URL displays as . Instead, I want it to remove and display only where the user can see the login screen.

Even when using

window.location.replace("authentication.hello.com")
, I face the same issue of displaying . My goal is to solely load the URL authentication.hello.com without including application.hello.com if the user is not logged in.

If anyone can assist me in achieving this behavior using pure JavaScript or TypeScript, I would greatly appreciate it.

Answer №1

Remember to utilize the complete URL when assigning a new value to window.location.href :

window.location.href = "http://authentication.hello.com";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble arises when attempting to showcase document fields in MongoDB

As a beginner in programming, I am putting in my best effort to figure things out on my own. However, I seem to be stuck without any guidance. I am attempting to display all products from the mongoDB based on their brand. While I have successfully set up a ...

"Facing an issue where ts-node is not recognizing d.ts files, despite tsc being able to compile them

I am currently using typescript along with express and attempting to enhance the request object in express. Below is my server.ts file: import express, { Request, Response } from "express"; const app = express(); app.use(function(req: Request, res: Respo ...

The side-nav in Materilize remains permanently open and does not have the option to load in a collapsed state

My sidebar navigation is not working as intended. I want it to load collapsed and display a modal, similar to the example in this fiddle: Here is the relevant code snippet: HTML: <header class="text-center"> </header> <div class="mai ...

Unable to display results in the control: select2 version 4 ajax data is not showing up

Ever since transitioning to version 4 of the select2 plugin, I've encountered an issue with my ajax requests. Although I receive a response in the console showing as an array, the results are not appearing in the select2 control. The HTTP response l ...

Dealing with ReactJs Unhandled Promise Rejection: SyntaxError - Here's the Solution

Struggling to use the Fetch API in ReactJS to retrieve a list of movies. Encountering an issue, can anyone offer assistance? fetch("https://reactnative.dev/movies.json", { mode: "no-cors", // 'cors' by default }) ...

Using mongoDB to insert data followed by processing it with the process.next

Currently, I am in the process of inputting a list of 50k entries into my database. var tickets = [new Ticket(), new Ticket(), ...]; // 50k of them tickets.forEach(function (t, ind){ console.log(ind+1 + '/' + tickets.length); Ticket.find ...

Navigating smoothly through different URLs to a single state using Angular's UI-Router

I recently started using angular's ui-router and I am looking for a way to configure multiple URLs to point to the same state. For instance: /orgs/12354/overview // should show the same content as /org/overview Currently, my $state provider is set u ...

What is the best way to loop through an array of documents returned by Mongoose using Mongoose?

Within my server built on node.js (express based), there is a function that retrieves all users. Here is the function: export async function findAllUser() { let users = await User.find({}).exec() return users } In my node.js application, I have two m ...

Download or access blob using FileSaver.js on iOS Chrome and Safari

I'm utilizing the docxtemplater library in JavaScript to generate a docx document. It works perfectly on desktop browsers, but I'm encountering issues on iOS. When attempting to download or open the document on iOS, a new tab opens in the brows ...

What could be causing the compatibility issue between me and $.ajax?

For some reason, the $.ajax function is not being called in my code. I am using xampp as my localhost and jQuery is working fine. When I click on the button, the text below it changes, but the $.ajax part does not seem to execute. Here is my page: <!D ...

Using Typescript literal types as keys in an indexer is a common practice

Can we create a TypeScript literal type that acts as a string key in an indexer? type TColorKey = 'dark' | 'light'; interface ColorMap { [period: TColorKey]: Color; } But when attempting this, the following error is generated: An ...

What is the best way to trigger a new css animation on an element that is already in the midst of

Let's talk about an element that already has an animation set to trigger at a specific time: .element { width: 100%; height: 87.5%; background: #DDD; position: absolute; top: 12.5%; left: 0%; -webkit-animation: load 0.5s ease-out 5s bac ...

Tips on retrieving objects from Firebase's item Array

Although I've searched for similar questions, I can't seem to find the right solution to my issue. I've been working on a firebase / vue.js project as a training exercise where I'm refactoring it to incorporate Vuex, http vue resource c ...

When attempting to retrieve the highWaterMark property of a Node.js stream in TypeScript, an error is thrown stating: "The property '_readableState' does not exist."

I have a query regarding TypeScript and streams in Node.js. I am looking to extend the stream base class to access the highWaterMark option. While the following code works in TypeScript: import * as stream from 'stream'; class ExampleStream ex ...

Generate dynamic arrays in JavaScript/jQuery

I am encountering a challenge in creating a specific array for a project. The array needs to have the following fields consistently: [id | Type | nbItems] Following that, we have: m_name : m_value : However, the number of m_name/m_value pairs can v ...

Module 'mongodb' not found in basic Node.js application

TL;DR: Here are the detailed steps I followed to encounter an error. To get to the main question, scroll to the bottom. I'm currently working through a book called addyosmani - backbone-fundamentals, which guides me in creating a basic backbone.js ap ...

AngularJS - dynamically displaying updated content based on dropdown selection

I have implemented two dropdown lists using the select tag. I want to dynamically update the options in the second dropdown based on the selection from the first dropdown, and then display relevant information underneath based on the selection from the sec ...

Convert an enum value to a String representation

I need assistance with converting my enum value to a string format export enum Roles { manager = "manager", user = "user" } console.log(" Roles.manager: ", Roles[Roles.manager]); The following is displayed in the console: Roles.manager: manage ...

What is the proper way to retrieve the Nuxt context within the fetch() hook?

Is there a way to access the props within an async fetch() function when also using async fetch(context)? I'm trying to figure out how to work with both simultaneously. ...