vue-session | simplistic session plugin for VueJS | Plugin library

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/ (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:

I try to access data from session, but I don't get anything.

In Controller I use: session()->get('cas_user') ?? ""; , and I get some date.

In Vuejs I try this: this.$session.get('cas_user') , and I don't get anything. Also this.$session.exists() is false.

I have vue-session.

I am building a single-page application with Vue and laravel API as backend. I've tried some packages like Vue Session and it worked well, however in almost every API call I always need to send 2 or 3 parameters that will always be the same (stored in vue-session), like user_id and company_id. I used to manage this with common PHP sessions (Zend_Session with Zend Framework) in my other applications, this way I always have that information stored in my backend session and don't need to send it every time by the frontend

Here's an example of how I used to do it with PHP session

npm run build gives

ERROR TypeError: Cannot read property 'match' of undefined.

I'm working on a project where I want to update the Webpack 2.7 config to the newer 4.35 for optimization and cleaning purpose. I rebuild from scratch my configuration, works on every browser (Firefox, Chrome, Edge) but not IE11. No error in the console, a blank page.

I'm using SASS, SCSS, CSS, JS and Vue

I tried to use the previous configuration but I have to update to many things and I failed to compile in the end. I try not to upgrade every package but only Webpack and the ones that needed to upgrade for compatibility purpose. I also already tried Vue-CLI as it's a Vue project, but same issue. I needed to rewrite every predefined configuration to work for my project...

Previous package.json

I understand how to use a Vue plugin like vue-session for creating and holding a session. But I am not sure how to deal with user data from a session, especially when it comes to reactivity. E.g.: I have a User component in the navigation header which displays the currently logged in user. How do I ensure that the username shown via this User component is reactive? In other words: if somewhen while using the application a login happens (to enable restricted functions), then how can the User component know?

Is $watch the right way to go? But this means polling, doesn't it?

How can I ensure that the user data stored in the session plugin is reactive?

Imagine such a component which visualises the logged in user:

I'm learning deploy my Vue app to Heroku. I was deploy my code to Heroku and I want it auto build my code to dist/ folder. I tried config the package file. But I always get an error. What is the best way to auto build Vue app after deploy?

My code structure:

how to save using Vuejs elements in the Shopping Cart when the user get in the website even if he refreshs the page later ?

Is Vue-session the perfect tool for that ? Also, can you suggest me a good documentation for that ? Thank you !

I'm using VueSession in my project. I created a login component and I'm passing data to my backend (Django, returns JWT token). Here is my problem. My login works fine, it returns JWT but when I want to get data from other endpoints I'm getting error 401 (Authentication credentials were not provided). When I'm using curl in my terminal everything works fine.

curl -X POST -d "username=test&password=test" http://localhost:8000/api/token/auth/ it returns token

curl -H "Authorization: JWT " http://localhost:8000/protected-url/ and it returns data from website

Here is what I set up in my Vue project.

Login.vue