In my angular2 application i have two components (profile / projects) so my routes are like
{ path: 'profile', component: ProfileComponent },
{ path: 'projects', component: ProjectsComponent }
and i need to integrate angular 2 in existing struts application where all urls are having .do as url extension
so i have updated my routes to
{ path: 'profile.do', component: ProfileComponent },
{ path: 'projects.do', component: ProjectsComponent }
when i launch my application directly with localhost:3000/profile.do i am getting Cannot GET /profile.do error
where as when launch application using localhost:3000/ and click hyper link my profile it works
Any suggestion or solution to access my application with localhost:3000/profile.do url
When you hit localhost:3000/profile.do it goes directly to server and tries to resolve the resource, if appropriate redirects are not set on server side you will get errors saying resource not found, Angular routing kicks only after the default page is loaded, this is why it works when the page is already loaded and you hit hyperlink.
Set appropriate redirects on server side.
Hope this helps!!
Related
When component introduces new route for its router-view it is working while going trough the app, but once you refresh or try to access url directly it does not load. I assume that it is because of the fact that component adding routes did not add them yet.
But I would expect that router would parse url by its segments, match parent component, loads it (which introduces child routes) and then continue with next segment. Or something similar.
Is there a way how to achieve routing added lazily? So each loaded module introduce its part (module) of a router? But in same time they can be accessed by url?
Thanks
Here is reproduced issue: https://codesandbox.io/s/vue-3-router-lazy-route-5opufo
Click on Admin link and then settings, it works, try to access admin/settings by url, it does not load settings content.
EDIT:
Here what I expect https://stackblitz.com/edit/angular-vwnzjg
ATTENTION it fails on stackblitz, but you can download the project, install dependencies and try it yourself to see that it works correctly.
After start dev server, navigate directly to http://localhost:4200/customers/profile as you can see, it works even the fact that the router part targeted is loaded lazily in Customers module.
When you click on admin and then click on settings, the code run follows this scenario:
Click admin -> router resolved (found admin component) -> admin component setup -> you dynamic add settings router
-> click settings -> router resolved (found settings component) -> load settings component successfully
But when you reload the browser on the /admin/settings route, the scenario will be:
Reload page '/admin/settings' -> router resolved (found admin component but NOT the settings component because admin component's setup code is not run yet)
-> only load admin component
In this scenario, the admin component's setup code will be run after the router is resolved. So the dynamic adding router code is not run at that time and the router can NOT resolve the settings component
Solution
Move your dynamic adding router code to beforeEach navigation guard so it can be run every time the router resolved
router.beforeEach((to, from) => {
const hasRoute = router.hasRoute(to.name || "");
if (to.path === "/admin/settings" && !router.hasRoute(to.name || "")) {
router.addRoute("admin", {
path: "settings",
name: "settings",
component: { template: "<div>AdminSettings</div>" }
});
// Don't forget to return the router here to make sure the router will be correctly resolved
return { name: "settings" };
}
});
I am using Auth0 NextJs SDK for authentication in my NextJS App. I am following this tutorial https://auth0.com/blog/introducing-the-auth0-next-js-sdk/. In my local machine, everything works fine.
The configuration for Auth0 in my local server:
AUTH0_SECRET=XXXXX
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=https://myappfakename.us.auth0.com
AUTH0_CLIENT_ID=XXXX
AUTH0_CLIENT_SECRET=XXXX
In the Auth0 Dashboard, I added the following URLs :
Allowed Callback URLs: http://localhost:3000/api/auth/callback
Allowed Logout URLs: http://localhost:3000/
My local app works locally fine.
I uploaded the app on Vercel. And changed the
AUTH0_BASE_URL=https://mysitefakename.vercel.app/
In Auth0 Dashboard, updated the following information:
Allowed Callback URLs: https://mysitefakename.vercel.app/api/auth/callback
Allowed Logout URLs: https://mysitefakename.vercel.app
I am getting the following error:
Oops!, something went wrong
Callback URL mismatch.
The provided redirect_uri is not in the list of allowed callback URLs.
Please go to the Application Settings page and make sure you are sending a valid callback url from your application
What changes I should make it works from Vercel as well?
You can try to check if vercel isn't changing the url when redirecting to auth0. Your configurations seems good to me. The error is very explicit though. I think a good option should be to verify that the redirect (if handled by vercel) is doing with the same url as auth0 expects.
And don't forget to add the url you're currently on when performing the callback. Are you in https://mysitefakename.vercel.app/api/auth/callback when the callback is executed? (call auth0).
you have to change your base url in the env.local file
AUTH0_BASE_URL=https://mysitefakename.vercel.app/
you can also make two more env files namely env.development and env.production and set different base urls for different cases so that the correct base url is automatically loaded depending on how ur web app is running.
You need to add handleLogin under api/auth/[...auth0].js and that will solve it:
import { handleAuth, handleLogin } from '#auth0/nextjs-auth0';
export default handleAuth({
async login(request, response) {
await handleLogin(request, response, {
returnTo: '/profile',
});
},
});
Don't forget to also add allowed callback url in [Auth0 Dashboard]: https://manage.auth0.com/dashboard for your hosted app for both local and hosted instance:
http://localhost:3000/api/auth/callback, https://*.vercel.app/api/auth/callback
I am trying to use the NelmioApiDocBundle for a Symfony 3.4 projects API documentation, while also trying to wrap my head around OAuth 2 authorization for the project API access to begin with.
So far I've followed this tutorial on how to get FOSOAuthServerBundle working. So far I can
1.) create a client using the command line command:
php bin/console fos:oauth-server:create-client --redirect-uri="___" --grant-type="authorization_code" --grant-type="password" --grant-type="refresh_token" --grant-type="token" --grant-type="client_credentials"
2.) I can also get an access token manually by visiting this url on my server
http://127.0.0.1:8000/oauth/v2/token?client_id=______&client_secret=________&grant_type=client_credentials
3.) I can use the token to access areas of my Symfony project requiring OAuth Access by including the token in a GET parameter
However, in the NelmioApiDocBundle Authorizations I cannot get this to work to completion. Here is a screenshot:
If enter my client_id and secret key it takes me to the Login Page, as expected. I can enter my login information and in takes me to the Approve or Deny Page, as expected. At this point if I click either Approve or Deny it tries to use a "redirect_uri" of http://localhost:3200/oauth2-redirect.html. No matter what I do I cannot change the redirect URI.
How to I get the a proper redirect URI?
Ok, this was actually easily fixed. You need to add a single line:
oauth2RedirectUrl: 'URLhere',
to the file init-swagger-ui.js which is located (Symfony 3.4) in web/bundles/nelmioapidoc/
The final file ended up looking like this:
window.onload = () => {
const data = JSON.parse(document.getElementById('swagger-data').innerText);
const ui = SwaggerUIBundle({
oauth2RedirectUrl: 'URLhere',
spec: data.spec,
dom_id: '#swagger-ui',
validatorUrl: null,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: 'StandaloneLayout'
});
window.ui = ui;
};
Also you likely are going to want to download the file oauth2-redirect.html from the Swagger project to include for the actual redirect.
i get the same error even when i enter the URL with absolute path
But with Routing it is working fine
{ path: 'login' , component: LoginComponent },
{ path: 'home' , component: HomeComponent},
It's not generally an issue with angular, this issue occurs if your API uses the same port and when you refresh the page the request will go as Get: Login since your API does not have the matching valid param it will throw 404.
Hence that is displayed in the browser
I read a lot of questions about 'history.push nginx react-router' but I didn't find the solution for the problem I'm facing.
The problem is, when I log in my application in my Login component I do something like this after the ajax call is executed:
cb = (res) => {
if (res.token!== null && res.token !== undefined){
localStorage.setItem("token",res.token);
localStorage.setItem("expiresIn",res.expiresIn);
localStorage.setItem("email", res.email);
**history.push('/home/0/0');**
}else{this.setState({errorTextMail:"wrong mail or wrong password!"})}}
Locally it works fine but in the console the history.push('/home/0/0') fires a request that nginx doesn't handle and return 404, but in my browser the app log me in and I don't see the error.
Instead when I build the app and put the build folder under nginx to serve static files, when I try to login it show me the 404 page. Then if I refresh the page (removing the /home/0/0 from the url) it works fine, recognize the token and log me in and I can browse other route of the app.
I was supposed that history.push would have been handled by react-router, just changing the component mapped by the appropriate <Route path="/home/:idOne/:idTwo" component={Home} /> component and not firing a new request to nginx.
My question is, there is a way to switch compoent when the cb function return my token instead of using history.push('/home/0/0')?
Note the history object is defined this way
import history from './history';
and the history.js's content is :
import createHistory from 'history/createBrowserHistory'
export default createHistory({
forceRefresh: true
})
Thanks for any suggestion.