Accessing Angular2 routes from browser, nginx server - javascript

Here is the problem,
Concrete example is "confirmation email" for registration.
I did a register component in my angular2 application. Which works pretty fine, it sends a confirmation email with a url like this :
https://www.host.com/application/rootFolder/confirmEmail?token=1238344139041
GET Token value is supposed to identify the user/email, and confirm validity in the "confirmEmail" component of the application.
But, and somehow logical, it fails when browser tries to call this URL directly since it does NOT really exist on server!
On server, for this app, only
https://www.host.com/application/rootFolder
exists! subfolders do not exist, the "sub-routes" are managed by angular2 router...
The server I use is
nginx 1.10.1
There is no specific "location" config in default.conf file, only the "fastcgi_pass" for php files.
So question is :
How to get the server redirect the request to the app_root directory, but keeping the childroute parameters... ?
How, once redirected on root dir, to manage the url parameters (/confirmEmail?token=1238344139041) to make angular2 router get to the right component with GET parameters?
Thanks for reading/help

Related

Nuxt.js Facebook Login appending '#_=_' to uri

I see plenty of others have had issues with facebook appending this to the callback uri and saw some good solutions for handling this client side with js embedded in the page. I have a nodejs api that handles the actual authorization with passportjs and passes it to our frontend (nuxtjs based on vue 2). The client stalls when trying to access/redirect any routes after being sent to the uri with the appended
I was hoping I could fix it with
//dashboard.vue
mount(){
if (window.location.hash == "#_=_"){
window.location.hash = ''
}
}
but this doesn't seem to fix anything with the router. I also tried adding a redirect to the vue router
//.nuxt/router.js
{ path: "/dashboard#_=_", redirect: "/dashboard" }
but the vue router dynamically generates on runtime so anything I hard-code there gets undone.
From what I undestand this is strictly a client side problem, but maybe I'm missing some parameter in the Facebook API call that could prevent this?
//backend api calling fb api
app.get('/facebook', passport.authenticate('facebook')) //not specifying scope since still in dev and haven't applied for approval

routing issue on react app hosted on github

I created a React app which has four routes, user,admin,home and bus.
if I want to access http://localhost:300/user I was able to access that,
but after hosting it on Github( https://loveyourtrip.tk/ ), if I want to access https://loveyourtrip.tk/user , GitHub throws error status code 404.
However, I can log on https://loveyourtrip.tk/ . once I log on this URL, there is a button called "mange account". if you click there , you can see user. once clicked on user , you can go to https://loveyourtrip.tk/user. but I am not able to access it directly. How can I resolve this issue?
It's because you didn't handle the /user in the backend.
You can handle the whole thing from the front end by using HashRouter instead of BrowserRouter.
Or you can handle it from the backend by return the html page to all the routes.
Take a look at this https://stackblitz.com/edit/hashrouter-demo

why can't I pull HTTP requests after configured controller in nest.js

So, the person who left the company used Nest.js write this server side.
He has auth.controller, auth.service,auth.module,auth-token,jwt.strategy and jwt-payload all set up well, and I checked his module, everything is imported and the providers are being set up well.
But in front-end I do send HTTP request in any end point, I just always get code 404.
even if i wrote a simple end point like this :
*#Get('/meow')
toMeow(){
return 'meow';
}*
in his controller file, I still can't pull any HTTP request.
In his other folders controller ,I do can pull the HTTP request well with same address plus the routes
What's the reason for this?
My coworker solved it, I didnt register jwt.strategy to the Module

AngularJS: Retrieving Videogular templates stored in $templateCache results 404 Error

I currently develop an AngularJS 1.5.9 Single Page Application on my localhost with NodeJS running backend, where I use
Videogular framework. http://www.videogular.com/
Everything is fine except inserting videogular object on my page. I strictly follow the given example: http://www.videogular.com/examples/simplest-videogular-player/
<videogular vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"
vg-native-controls="true">
</vg-media>
</videogular>
But it results in AngularJS error:
(sessionId in the request is the auth token not linked to current problem)
I have found the following in videogular.js :
$templateCache.put("vg-templates/vg-media-video", "<video></video>");
$templateCache.put("vg-templates/vg-media-audio", "<audio></audio>");
I have tried to store files locally, and the error disappeared
Actually there are a lot of plugins for Videogular and they all are using $templateCache to store some files in the cache, so it would be very confusing to manually store them locally in my app folder.
How can such files be stored in the cache using $templateCache so they can be extracted properly?
I apreciate your help.
UPDATE
I have tried insert $templateCache.get to directive, where the part is loading with error 404, and it works. But still doesn't work as it supposed to be.
It seems like there is an issue with sessionId that you pass in URL parametrs, do you actually need it?
I guess your interceptor or whatever auth managing module is wrong configured, so you don't check request target URL and id parameters are going to be added for local calls as well as for backend calls.

Permission route on static file express JS

I am trying to authenticate user when he request some page that has static route.
app.use(express.static(__dirname + '/public/app');
Assume that the folder "templates" is under the path above ('/public/app/templates') :
app.get('/templates/permissionPage.html',function(req,res){
// if user is authorized.. reutrn the page,
else return 401..
});
my routing even don't enter the get request of the page. how can I handle that request?
I want that only specific users can access this page, although he got static route.
I am using angularJS on my front-end
Thank you
You have two options:
Easy one: auth users on your web-server (proxy-server). Docs for Nginx, and for Apache
Hard one: Build accounts and auth module for your app. This will require work with storage (database), logic, and UI/UX. Or use ready solutions, like PassportJS

Categories