I want to find a method how to share one token between multiple vue apps. With this i can create multiple single page application mimicking the microservices on back end. I was thinking about putting it into Vuex and save the state in localstorage/cache however i cannot retrieve the same state for another app. Any suggestions?
Asked
Active
Viewed 1,009 times
0
-
Are these apps located on subdomains or different domains? Do they use the same API domain? – aBiscuit Nov 05 '18 at 19:48
-
They are on the same domains. As fpr the API its in progress. There will be a single gateway for authentication however. – Peter Pšenák Nov 05 '18 at 20:10
1 Answers
3
For such case using cookies would be appropriate.
Unlike localStorage, it is possible to share same cookie across parent domain (example.com) and subdomains (sub-domain.example.com). It is done by specifying domain property of cookies as wildcard - .example.com (note the leading dot in front of the domain name). Relevant answer
Depending on application architecture, you can manually read cookie in front-end on application startup, verify if user is singed in and save it to the store.
In case API is hosted on a subdomain as well, it is possible to make a request to the API (if cookies domain is specified, cookies header will be sent with a request) and verify if user is authorized to access the app. It is only suggested, if API doesn't check token in different way (e.g. in payload or Authorization header).
In both cases, it would be suggested to create API endpoint to verify token, call it on application mount and handle appropriately.
Also, since managing cookies manually may get quite uncomfortable, using third party libraries will provide similar API as using localStorage. For example: js-cookie.
aBiscuit
- 3,292
- 1
- 11
- 24
-
Thank you I am gonna consider it and try it out. If it is gonna help i will add this as the right answer. :) – Peter Pšenák Nov 05 '18 at 20:44