localhost and remote host access angularjs - angularjs

I have a page with a button and a form. Initially only the button will be visible, form is hidden using ng-hide condition (link to third party website) , on clicking that button you will be redirected to another page for log-in. After log-in my API redirects to my original page but instead of ,
localhost:8443/mypage/mypage.html (where i set a variable as true once log-in is success to display the form)
callback is for
john-1234:8443/mypage/mypage.html (the variable is not set true)
Is there any difference between calling as localhost:8443 and john-1234:8443. Does it have any impact on variables evaluated by controller.
Please help me. Sorry if this is a silly doubt. But i am new to this.

localhost means this computer and resolved as 127.0.0.1 as you may already know.
john-1234 will not be resolved then as it does not mean this computer for your system.
So your controller will not receive the variables. Possibly you have a test environment. If you proceed with production environment, then you would be able to redirect to an exact URL which will perfectly work.

Related

Gatsby session check and SEO

I’m making app-ish gatsby website with authentication.
Im displaying user menu in header if user is logged in, and login button if not.
Until session is checked, I dont know if I should show menu or login button. Because of that I decided not to show website at all initially (if session cookie/token is not detected, website is loaded almost immediately, but initially its blocked too), until session information comes back from backend.
I did this by simply creating session reducer with initial state variable „checked” set initially to false - website shows content only when this variable is set to true, what happens after session check or after token/cookie presence check.
But, from what I understand, if I block website until session is checked and no content is shown I lose all static seo power of gatsby. I mean google bots won’t scan my website if theres no content shown initially. Am I correct?
What would be your approach to this problem? Changing from „log in” button (or not showing it at all initially) to usermenu in header looks weird.
In order for SEO to be correct, you can add loading in the menu and login button areas when detect.
But, from what I understand, if I block website until session is
checked and no content is shown I lose all static seo power of gatsby.
I mean google bots won’t scan my website if theres no content shown
initially. Am I correct?
Yes and no. If you block all your website before you check the cookie, yes. However, if you are only blocking the header part to show/hide one button or another, you are not blocking the statically of Gatsby. In addition, keep in mind that Google bots always make various crawls; one the check the "static" content (without JavaScript) and one of them awaiting the JavaScript response/rendering.
In your case, if you are only checking a local variable to decide which component render, you are not losing the SEO power of Gatsby, since you are only rendering (or not) a small piece of code.
In the worst case that the crawler wasn't able to detect that small piece of code, the SEO impact is meaningless, it won't affect the overall performance only to show/hide a component.
For further details about Google's crawlers check the docs.
What would be your approach to this problem? Changing from "log in”
button (or not showing it at all initially) to usermenu in header
looks weird.
I would say the best approach is the best UX response, since the SEO impact is meaningless. It may not be intuitive for a user to see a "Log in" button and once the cookie/reducer is checked change it suddenly to another content. I would prefer to awaiting the variable.

stop Angular from running the rest of the script and perform another action

I've been working on replacing alert() pop-ups in our Angular code with Angular overlay modals. I'm almost done with the exception of one problem.
I have a modal that opens when the user login has timed out. Some pages will load, fire the script properly and the overlay will be in focus, waiting for the user to click "ok" which sends them to the login page - which is what I want.
On other pages, content will partially load, then fire the overlay modal and for a split second I will see it, then the page continues to load, the modal goes away and even though they get logged out the page doesn't go to the login page.
I need some direction determining what code I should add after the overlay fires to prevent any other code from executing so the user has to interact with the overlay.
I'm sorry I can't share any code - it's proprietary - I just need some direction to go in.
This is very difficult to answer without having access to any code or fully understanding how you are managing various states/views.
A simple solution would be adding a function to the $rootScope which constantly checks if a user is authenticated (aka not timed out). And then have it perform some action if the user is no longer authenticated.
How you store the authentication indicator is completely up to you. Without knowing more about the app it would be difficult to say where the best place would be.
Example code:
$rootScope.checkAuth(){
if (!$sessionStorage.auth){
$state.go(login)
}
}
setTimeout($rootScope.checkAuth,10000)
You could also handle this by not resolving each view/state until a user has been confirmed as authenticated. Once again, how you set that up would be dependent on the structure of your app.

Preventing from part of files loading to browser

I am using angular
Lets say i have login screen(model,controller,view) and few other screens (model,controller,view) that perform some secret manipulation that available only to logged in user.
Is this possible to load to browser only login files(That those files won't be shown in F12/sources) ,then when user successfully logged in load all the secret files.
In short i don't want that user can see those files before he logged in.
That is one of the problems within client-side applications like angular SPAs. Since you want to load the content from your server, IF something happens on the client, the client already has to know, where it can get the content.
One solution could be to us ui-router. (Documentation). There, you can set a state for logged in users. Every state can have an own html template, which gets loaded, when you enter the state.
The problem ist, that the path of said html template is already on the client. That means, you have to set some kind of cookie from your server, so that you know, that the client is logged in. And only then, the requested template can be recieved. That way everybody can know where the template is on your server but cannot access it.

Enable editing option only if the user is authenticated, else display the information normally

So I'm still new to Angularjs, but I'm wondering if it's possible to show certain things if the user isn't authenticated while full access if a user authenticates without duplicating the template? A solution that I could think of is using ng-show and ng-hide where certain features will show up if isAuthenticated is true. Is there a better way of doing this?
I would use ng-if because this completely removes the DOM as opposed to just hiding it.
You can use the resolve function in routing to determine whether a user is authenticated and authorized before the page loads so they won't see the edit option flash and disappear.
Remember that since this is javascript the user can always modify the code to allow editing to show up. Make sure on the server side that editing is blocked if the user is not authorized to do so.

AngularJS returned 404 error if I typed the URL

I have an angularjs application hosted in my local IIS with route configured. For example '/services' will use servicesController and services.partial.html view.
It worked well if I clicked the link on the main page and the browser address changed to http://localhost/services. But if I refresh or type this URL directly I got 404 error.
Can anyone help me what I did wrong.
when you refresh or type you page, the entire page while be reloaded out of angular's control, in fact its the browser that is taking control. thus you localhost have to return a valid resource for /services. without html being returned, there is no way angular can control the behavior of the route.
basically what you should do is config you server and return the same page for /services as /
Use http://localhost/#/services instead of http://localhost/services and this would work fine as I see.

Resources