fix #96 login jwt form now works as expected

Author: Benjamin RICHARD

README.md

@@ -131,7 +131,7 @@ For [Angular](https://angular.io/) (v5), i decided to do quite different way:
 * install the project with `npm run init-project` (or init-project:win for windows system) which will launch :
  1. copy the env file (or set them on your system) : `cp .env.dist .env`
  2. php dependancies installation: `composer install`
- 3. nodejs tooling installation (and angular deps): `npm install && cd assets/js/devxpress-angular && npm install`
+ 3. nodejs tooling installation (and angular deps): `npm install && cd assets/js/form-devxpress-angular && npm install`
  4. assets generation: `npm run dev`
  5. db init: `php bin/console doctrine:database:create` & `doctrine:schema:create` & `doctrine:fixtures:load`
  * it creates the physical database from the `config/packages/doctrine.yaml` file
@@ -142,15 +142,16 @@ For [Angular](https://angular.io/) (v5), i decided to do quite different way:
  2. Run `npm run jwt-init` and use the passphrase you setup for JWT_PASSPHRASE
 * Run your application with php built-in server:
  1. Change to the project directory
- 2. Execute the `npm run dev-server-hot` (or dev-server-hot:win for windows system) command to start the asset server that will build your assets and your manifest.json and serve the assets with hot module replacment when you do a modification on a vuejs file
- 3. Execute the `npm run sf-dev` (or sf-dev:win for windows system) command;
- 4. Browse to the http://localhost:80/ URL.
+ 2. Execute the `npm run build` that will build assets and watch for angular app change
+ 3. Execute the `npm run dev-server-hot` (or dev-server-hot:win for windows system) command to start the asset server that will build your assets for vue and react and your manifest.json and serve the assets with hot module replacement when you do a modification on a vuejs file
+ 4. Execute the `npm run sf-dev` (or sf-dev:win for windows system) command;
+ 5. Browse to the http://localhost:80/ URL.
 
  * Run composer require symfony/web-server-bundle for a better web server.
  * Quit the server with CTRL-C.
  * And launch `php bin/console server:start 127.0.0.1:80`
 
- 5. Run frontend tests with `npm run test`
+ 6. Run frontend tests with `npm run test`
 
 Don't forget to prefer an nginx/apache server to be able to use full features of api-platform.
 

assets/js/api-platform-admin-react/App.js

@@ -11,7 +11,7 @@ const fetchHeaders = (options) => {
  return
  }
 
- options.headers.set('Authorization', `Bearer ${token}`);
+ options.headers.set('Authorization', `${token}`);
 };
 const fetchWithAuth = (url, options = {}) => {
  if (!options.headers) options.headers = new Headers({ Accept: 'application/ld+json' });

assets/js/lib/login.js

@@ -18,6 +18,7 @@ axios.interceptors.request.eject(logoutStdInterceptors)
 
 // @todo move it to RxJs implementation with subscribe + only call the uri on last call of the method during 300ms
 export default function isLoggedIn(loaderToActivate, uri = loginInfos.uriIsLoggedIn.json) {
+ debugger
  return new Promise((resolve, reject) => {
  if (loaderToActivate && loaderToActivate.isLoading) {
  loaderToActivate.isLoading = true

assets/js/login/components/Secured.vue

@@ -23,6 +23,7 @@ export default {
  QSpinnerCircles,
  Notify
  },
+ props: ['loggedInUri'],
  data() {
  return {
  user: {},
@@ -61,7 +62,7 @@ export default {
  })
  this.$router.push('Login')
  })
- isLoggedIn()
+ isLoggedIn(undefined, this.loggedInUri)
  },
 }
 </script>

assets/js/login/router/index.js

@@ -54,26 +54,23 @@ if (!redirect) {
 
 let loggedInUri = loginInfos.uriIsLoggedIn.json
 let loginUri = decodeURIComponent(
- location.search
-  .substr(1)
- .split('&')
- .filter(item => item.split('=')[0] === 'mode')
- .map(item => {
- if (!item) {
+ // looks for jwt or json string in uri, it will determine which uri to login with (this is only for this demo app, you should not have to do this)
+ location.pathname
+ .split('/')
+ .filter(item => ['json', 'jwt'].includes(item))
+ .map(mode => {
+ if (!mode) {
  return
  }
 
- const mode = item.split('=')[1]
- if (['json', 'jwt'].includes(mode)) {
- switch (mode) {
- case 'jwt':
- loggedInUri = loginInfos.uriIsLoggedIn.jwt
+ switch (mode) {
+ case 'jwt':
+ loggedInUri = loginInfos.uriIsLoggedIn.jwt
 
- return loginInfos.uriLogin.jwt
- case 'json':
- default:
- return loginInfos.uriLogin.json
- }
+ return loginInfos.uriLogin.jwt
+ case 'json':
+ default:
+ return loginInfos.uriLogin.json
  }
  })
  .join('')
@@ -100,7 +97,10 @@ export default new Router({
  path: '/secured',
  name: 'Secured',
  component: Secured,
- props: true,
+ props: {
+ default: true,
+ loggedInUri: loggedInUri,
+ },
  beforeEnter: vueRouterIsLoggedIn,
  },
  ],