I've been trying to rework an app to use the new session auth system.
Everything seems to work fine, however I am not able to use the Navigation (polaris) component successfully.
Let's say I have something like this :
<Navigation.Section
items={[
{
url : '/faq',
label : translations.faq,
icon : HintMajor
}
]}
/>
If I only put /faq I am unable to access the route. I am redirected to /auth and get obviously an error.
The only way I manage to make my routes work is to :
Add the shop query in each url like this :
// ...
url : '/faq?shop=${shop}',
// ...
Add every needed routes manually in my server.js WITHOUT the verifyRequest middleware (which does not seem like a good option to me)
// ...
router.get('/faq', handleRequest)
// ...
Can someone explain if I am doing anything wrong ?
(I am managing my SESSION_STORAGE with the custom redis storage shown in the repo doc https://github.com/Shopify/shopify-node-api/blob/main/docs/usage/customsessions.md)
Are you not supposed to have a wildcard in your App routes so that when you deliver backed end code it is doing just that, and leaving authentication to having the token in your header? No token and a request for anything authenticated and you then direct to login?
Related
I am currently doing a project with NextJs about a blog posting application similar to medium.com. However, I am facing a little problem when it comes to dynamic routes.
Background Info: My pages structure looks like this:
pages
|-> profile
|-> [username].tsx
url path example: /profile/[username]
Use case: I am in the profile page of someone (/profile/someone), and in the navbar, which is globally accessible, you have the ability to go into your profile (/profile/yourName). Howerver, if you click View Your Profile, the url does update, but the page does not appear to load and therefore, you cannot see your profile.
Original Code:
<Link href={`/profile/${username}`}>
<button>View Profile</button>
</Link>
Current Solution:
if (router.asPath.includes('profile'))
router.replace({
pathname: '/profile/[username]',
query: { username: username },
}).then(() => router.reload())
else
router.push(`/profile/${username}`)
The solution provided works, but load times significally increases when compared to the "Original Code" block or when asPath does not include 'profile'. I think this is because I am using reload(). I want to know if there is another solution that will improve loading time.
Thank you
I'm learning Nuxt.js and I'm puzzled by how difficult it seems to be to simply redirect a user to another page from a method that is triggered via a click.
Here is the set up: I'm using Nuxt Auth to authenticate users, once authenticated I want them to be forwarded away from the signup page to another route. I already have middleware set up that redirect logged-in users, but it is only triggered when I refresh the page, not when I first log them in.
I have a method like this:
async login(event) {
event.preventDefault()
try {
await this.$auth.loginWith('local', this.loginData)
// this is where my redirect logic should go
} catch(error) { ... }
}
So far I've tried using this.$nuxt.refresh() which doesn't do anything at all and I've also tried this.$router.push('/route') which seems to hang the page completely. Ideally, I would prefer the refresh approach so that I don't have to specify the landing page for logged in users in multiple places, but I also need to know how to use redirections inside methods, I would have thought it should be the most simple operation imaginable and yet it seems to be difficult to find.
Any tips would be highly appreciated!
UPDATE:
I've found a solution, although it's not an ideal one. I've added an if-statement into beforeCreate that checks this.$auth.loggedIn and if it's true, then it calls this.$auth.redirect('home') when "home" is defined in nuxt.config.js under auth redirect. The reason this solution is not ideal is that it relies on the auth module (as opposed to being a general redirect mechanism).
There's a way in Nuxt to reload the page like so:
this.$router.go(0)
also you can find more information here
if this.$router is not working, try this
this.$nuxt.$options.router.push(url);
I trying to upload a file using pug, multer and express.
The pug form looks like this
form(method='POST' enctype="multipart/form-data")
div.form-group
input#uploaddata.form-control(type='file', name='uploaddata' )
br
button.btn.btn-primary(type='submit' name='uploaddata') Upload
The server code looks like this (taken out of context)
.post('/uploaddata', function(req, res, next) {
upload.single('uploaddata',function(err) {
if(err){
throw err;
} else {
res.json({success : "File upload sucessfully.", status : 200});
}
});
})
My issue is that while the file uploads successfully, the success message is not shown on the same page, ie: a new page is loaded showing
{success : "File upload sucessfully.", status : 200}
As an example for other elements (link clicks) the message is displayed via such javascript:
$("#importdata").on('click', function(){
$.get( "/import", function( data ) {
$("#message").show().html(data['success']);
});
});
I tried doing a pure javascript in order to workaround the default form behaviour but no luck.
Your issue has to do with mixing form submissions and AJAX concepts. To be specific, you are submitting a form then returning a value appropriate to an AJAX API. You need to choose one or the other for this to work properly.
If you choose to submit this as a form you can't use res.json, you need to switch to res.render or res.redirect instead to render the page again. You are seeing exactly what you are telling node/express to do with res.json - JSON output. Rendering or redirecting is what you want to do here.
Here is the MDN primer on forms and also a tutorial specific to express.js.
Alternatively, if you choose to handle this with an AJAX API, you need to use jquery, fetch, axios, or similar in the browser to send the request and handle the response. This won't cause the page to reload, but you do need to handle the response somehow and modify the page, otherwise the user will just sit there wondering what has happened.
MDN has a great primer on AJAX that will help you get started there. If you are going down this path also make sure you read up on restful API design.
Neither one is inherently a better strategy, both methods are used in large-scale production applications. However, you do need to choose one or the other and not mix them as you have above.
Problem Set: Client .posts image from form action='/pages/contact/image/something' to node.js and I .putItem to AWS S3. On the success response I would like to send the image url back to the client without refreshing the screen and update the location they wanted to add the image with the new src url.
If the page refreshes I lose the location where they wanted to upload the image. Open to any suggestions, I have looked at res.send, res.end, res.json, res.jsonp, res.send(callback): all of which overwrite(refresh) the client webpage with the array, text or context in general I am passing back to the client . Code below:
myrouter.route('/Pages/:Page/Image/:Purpose')
.post(function (req, res) {
controller.addImageToS3(req, res)
.then(function(imgurl){
//res.json({imgurl : imgurl});
//res.send(imgurl);
//res.end(imgurl);
//res.send(req.query.callback(imgUploadResponse(imgurl)))
<response mechanism here>
console.log('Image Upload Complete');
}, function (err){
res.render('Admin/EditPages', {
apiData : apiData,
PageId : PageId
});
});
});
Ideally there could be a passed parameter to a javascript function that I could then use: Example:
function imgUploadResponse(imgurl){
// Do something with the url
}
You, as a developer, have full control over the s3 url format. It follows a straightforward convention:
s3-region.amazonaws.com/your-bucket-name/your-object-name.
For example:
https://s3-us-west-2.amazonaws.com/some-random-bucket-name/image.jpg
While I would recommend keeping those details in the back-end, if you really want to avoid using res.send, you can basically make the front-end aware of the url formatting convention and present the url to the user, even before the image was actually uploaded (just need to append the name of the image to the s3-region.amazonaws.com/your-bucket-name)
Also, I'm not sure why your page would refresh. There are ways to refresh content of your page without refreshing the whole page, the most basic being AJAX. Frameworks like angular provide you with promises that allow you to do back-end calls from the front-end.
Hope this helps!
I'm using durandaljs 2.0. I've installed the durandal starter-kit as suggested and explained here. In the shell I'm returning router.activate({ pushState: true } ); as explained in the relevant documentation (see the bottom of the page).
Happily, the URL is indeed in a 'push state' format, e.g. http://localhost:61285/flickr - the problem is that when I refresh the page I get a 404 error telling me "the resource cannot be found". If I set push-state to false ({pushState: false} above) I get a hashed URL, e.g. http://localhost:61285/#flickr - and now a refresh does work. So, how do I set up a push state mode in durandaljs 2.0 that will work with refresh?
Thanks,
Elior
Maybe to late...but
just change the routes config.
simple as this :
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index" }
);
When you refresh the page, the browser will make a request to the server with that URL http://localhost:61285/flickr.
What's probably happening is that if you are using ASP.NET MVC, the server is trying to locate a Controller called flickr and it throws an exception because obviously there isn't any resource with that name.
In order to get rid of this exception you should configure the server to serve the same HTML of the APP but for unknown URL's. This can be achieved using IIS URL Rewrite in ASP.NET.
So after setting up properly the server, by requesting an unknown URL it would return the initial view for the app plus whatever you pass in the query string parameters so the router can do its job at client side.
In this blog post you will find more information about how to configure ASP.NET to handle this scenarios. In the article the author uses AngularJS, however it will be the same for Durandal.
RainerAtSpirit and margabit, you're both right, thank you. Here is how I implemented the server side:
First I should note that all the interaction with the server is done via WebApi controllers.
so, for example, if the URL is:
http://localhost:61285/home/category2/subCategory22 (for a localhost), the server tries to look for a controller called 'home' and an action in it called 'category2'. Since there's no such action, I get a 404 error.
What I wanted is that the server WILL call the 'home' controller, but send the rest of the URL as parameters to the client. My solution was to add a hash after the controller's name, so that the URL will look like this: http://localhost:61285/home/#/category2/subCategory22. If this would happen then the client will take care of the hashed part with no 404 error.
For this to happen:
I added the following to 'web.config':
<customErrors mode="On" defaultRedirect="Error">
<error statusCode="404" redirect="Error" />
</customErrors>
Then I create a controller named 'ErrorController' with the following class in it:
public class ErrorController : ApiController
{
[HttpGet, HttpPost, HttpPut, HttpDelete, HttpHead, HttpOptions, AcceptVerbs("PATCH"), AllowAnonymous]
public HttpResponseMessage Handle404()
{
string [] parts = Request.RequestUri.OriginalString.Split(new[] { '?' }, StringSplitOptions.RemoveEmptyEntries);
string parameters = parts[ 1 ].Replace("aspxerrorpath=","");
var response = Request.CreateResponse(HttpStatusCode.Redirect);
response.Headers.Location = new Uri(parts[0].Replace("Error","") + string.Format("#{0}", parameters));
return response;
}
}
what happens is that when the server get a URL with no relevant action as I mentioned above, it redirects it to this controller in the following format: http://localhost:61285/Error?aspxerrorpath=home/category2/subCategory22
as you can see, I manipulate this to add the hash and remove the unnecessary info: http://localhost:61285/home/#/category2/subCategory22 and the redirect the server to the 'home' controller.
You might wonder why I do all of this - the reason is that Durandal, a wonderful platform, enables me to use push state, but in order for that to happen I have to work-around the server getting a non-hashed URL and pass it to the client despite the fact there's no relevant controller/action; Durandal get's a hashed URL but removes the hash automatically and the user eventually sees a hash-less URL while Durandal provides all the necessary push state functionality.
Elior