Building with Vue Cli App and remote PHP api

Question

I'm working on a project that uses Vue Cli and PHP

my folder structure :

[ folder structure ][] -admin and client contain admin interface and user interface built with vue cli respectively.

Admin has access to modify content loaded into client template when logged in.

How do I connect the admin with the php api in development and production such that no route can be accessed in the admin page if the admin is not logged in.

such that if I visit http://localhost:3001/admin/dashboard i will be redirected to http://localhost:3001/admin/ which is the login route.

my php runs on http://localhost:3000/

Senthil · Accepted Answer · 2021-09-19 00:47:23Z

1

Approach : Using Role and JWT you can restrict the routes .

Ref Here: https://medium.com/@ripoche.b/create-a-spa-with-role-based-authentication-with-laravel-and-vue-js-ac4b260b882f

answered Sep 19, 2021 at 0:47

Senthil

2,2441 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

opeolluwa Over a year ago

I'm building with bare php -- no frameworks

Senthil Over a year ago

using php sitepoint.com/php-authorization-jwt-json-web-tokens

Senthil Over a year ago

Ref. stackoverflow.com/questions/46899545/… High level approach is 1. Authentication of admin using a user name and password - Againts a DB (Recommended) / Hardcoded value from config file . 2. Then in the api, you need to return a JWT Token (combination of role, user id ) 3. Store the token in client side using Local storage (Vue JS). 4. For each service call, example navigate to dbd, send this token and in API validate is it valid or not. Then show the page / show 401 accordingly.

opeolluwa Over a year ago

So far, I have the option of using navigation guards on with vue and JWT token with php. I'm not really sure how to set this up especially Vue-router navigation guard. Any refrence would help

Senthil Over a year ago

In the beforeEnter action, you can check whether based on role matches / authorized. Ref : medium.com/js-dojo/…

Collectives™ on Stack Overflow

Building with Vue Cli App and remote PHP api

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related