how to get hash value from the URL

Question

I am working on re-directing user to a default page when they arrive on the landing page with a specific URL and I was wondering what will be the best to get the value after hash.

example: Landing page URL is: http://www.google.com but when user visits http://www.google.com/#puppies they will be re-directed to http://www.google.com/admin/signup

I have created a custom module called my-redirect and the code for index.js looks like below

module.exports = {
    construct: function(self, options) {
        self.pageBeforeSend = function(req, callback) {
            console.log("URL",req.absoluteUrl);
            return callback(null);
        };
    }
};

The issue is that the console.log just prints http://www.google.com even when the user visits http://www.google.com/#puppies

How do I get the value puppies in the example above?

Answer 1

This isn't an Apostrophe issue so much as a general web development issue. The hash and everything after it are not sent to the web server by the web browser at all.

That goes all the way back to the pre-JavaScript days when the hash was only used to jump to a "named anchor" somewhere in the page.

So it is always the responsibility of browser-side JavaScript to do something with the hash (or ignore it).

You might write:

if (window.location.hash === '#puppies') {
  window.location.href = '/admin/signup';
}

Pretty straightforward!

You could also use any number of frontend routers for jQuery, or a frontend framework like VueJS or React (with React Router configured to use the hash), but for this simple task that would be overkill.

You can put this code in a script tag, of course, or you can do it in a JavaScript file that you "push" with Apostrophe. You could put the code in a file called lib/modules/apostrophe-assets/public/js/site.js relative to your project (do not modify the apostrophe npm module), and add this to your module configuration in app.js:

apostrophe-assets: {
  scripts: [ 'site' ]
}

Hope this is helpful!