Skip to content
Advertisement

Unable to expose a public page referenced in an email to let users reset their password in a Vue JS, Node JS and Mongo db website structure

I’m working on a Vue JS, Node and Mongodb website with user management features. I implemented a “Reset Password” functionality: a user can access his profile page, press the reset password button and this will trigger a node functionaly, which is gonna send him an email containing a URL link pointing to a Vue JS component exposed to the public called “ResetPassword”.

The URL has this format: /ResetPassword/<token_assiged_to_user> (for ex. /ResetPassword/5fa3ff9e87e0fdba7097e3bfb5e02e450ca1e1cf )

I tested the functionality locally and it works like a charm, the problem is than since I move the implementation to an actual testing server the ResetPassword page doesn’t work anymore.

I marked as “public” the component in the index.js router file like this:

JavaScript

plus I’m using Vue-Router in my component to allow it to be exposed (here’s just the beginning of the component):

JavaScript

The ResetPassword page doesn’t even seem to be rendered while clicking the link and it appears entirely blank on the screen. The error “Uncaught SyntaxError: Unexpected token ‘<‘” is displayed referred to the manifest file and here’s the error that pops-up when I look at the console in the browser: console error

The routing configuration is set to “historymode” at the moment and I also implemented a fallback method to redirect towards our homepage.

Does anyone have an idea why this is happening? Am I missing something? I know Vue JS allows to only create some kind of “Single Page Applications”, but I thought exposing a public component like I described could be feasible.

Thanks so much to everyone in advance.

UPDATE: Here follows the main.js file requested in the comments below:

JavaScript

Advertisement

Answer

I faced the same issue in my project!

Unable to acess links (copying and pasting) whitin my Site : Node.js – Express.js – Webpack – Vue.js – historymode

The problem was related to my weback.prod.conf.js file.

Try to add this info to your “output” attribue in your webpack conf file : publicPath: ‘/’

you should have something like this :

JavaScript
User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement