sqreen / vue-authentication-example Goto Github PK

View Code? Open in Web Editor NEW

492.0 23.0 183.0 183 KB

This repo aims to answer how to handle authentication in your vue app.

JavaScript 76.81% HTML 1.07% Vue 22.11%

vue-authentication-example's Introduction

vue-auth-handling

The project

This repo is a support for this article and a talk given to VueJS Paris meetup

Demo of this repo.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

vue-authentication-example's People

Contributors

Stargazers

Watchers

Forkers

rubythonode malina eduardo76 milosbarlov lgs awvaarua giesberge mattocchi mikepyson jafri newsapkota efimov82 s-art erodewald mfaridzia almo7aya chenxingjun suminda123 skrubinator88 fatawesome vinidiktov-edsd franckaragao wahydu minhkhanb jpaulolxm jkirrane nicolasmrc keanen-vandiemen zhangyuezhong davyzhang compunick berlinsky mybigman adiirfan tirka amel13 beakshy dschien greenmoon1558 aryehbeitz juangnakarani hoailinh1210 briancaffey hernandobgx dzxt deva7mad keenbaffling waspar doanhcongnguyen ufobat wemteqdev mtdst virtualadrian sithu05 fede53 sabanemati fisthu alejandraaao lahiponeja quazer myalban oliverrandell bengitiger kirill-karpin desperadik vikrantkjain alvintang hhy5277 smartkuk eduardo-pacheco09 hangctt-1528 scriptonius sekretk jesusalexlara gdanielrg massimiliano76 pks-os d43pan jinphilips kiddten harrybuttowski andersnygaard datkk06 hazemplus kirillbaryba geocolumbus hamadalanbagi nirt04 giulia-benedetti niipntr konstantinlogin songvo sergeymalkov habibtalib raphamendonca viper3400 tmiklos tingyu-lee hesham-fahed harloveleen

vue-authentication-example's Issues

strict token checking

Even if I delete the token from local storage and click on any link I reach to that page. Ideally it should redirect me to login page. But yes when I refresh the page it takes me to the login page.

Typo?

vue-authentication-example/src/components/home/index.vue

Line 26 in 4c22da7

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

Can't install `node-sass` with latest version

Nodejs version: v18.17.1
Python version(might be unnecessary): 3.11.0

When trying to perform npm install or npm install node-sass, I have experienced the following error:

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@achrinza/[email protected]',
npm WARN EBADENGINE   required: { node: '8 || 10 || 12 || 14 || 16 || 17' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated [email protected]: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: 3.x is no longer supported
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\user\\Documents\\GitHub\\infosec-javascript-security-specialisation\\2-authentication\\3-frontend\\vue-authentication-example\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:210:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:210:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Python311\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Python311\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
npm ERR! gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:419:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:514:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1091:16)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:302:5)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\Documents\\GitHub\\infosec-javascript-security-specialisation\\2-authentication\\3-frontend\\vue-authentication-example\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\user\Documents\GitHub\infosec-javascript-security-specialisation\2-authentication\3-frontend\vue-authentication-example\node_modules\node-sass
npm ERR! gyp ERR! node -v v18.17.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in: C:\Users\user\AppData\Local\npm-cache\_logs\2023-11-06T22_14_13_675Z-debug-0.log

I wonder if others have had such issues, too. Anyway, I would submit a response if I found the solution.

Page not found after refresh `/account` page.

Hi, thanks for the sample code.

After authorization, when I refresh the /account page, I see that the page was not found. On the main page after updating the page, everything is fine with the application. So it should be?

https://vue-auth-example.netlify.com/account

[Q] What is the reason to use list here [USER_REQUEST]

vue-authentication-example/src/store/modules/user.js

Line 14 in e2839d8

[USER_REQUEST]: ({commit, dispatch}) => {

Seems str is enough:

USER_REQUEST: ({commit, dispatch}) => {

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.