Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts

    Need feedback on Vue from experienced Coders please

    Hello,

    I have prepared a restful api with Laravel and would like to communicate with a VUE app. Before I do so I have a few questions as I am not sure how to deal with these issues.

    1)I have built a Vue app using VUEX, I can login and logout via vue communicating with Axios to my API, all good but if i refresh the page(ie: per accident), the state of the vue app is lost and everything is back to where it was before I log in.
    How would you deal with this issue? I understand that vue has no persistent state, but if this right to build an app that works this way or shall I use a persistent state plugin like this one?
    https://github.com/robinvdvleuten/vuex-persistedstate

    2)I would like to build an app that shows 2 different admin panels, one for the users and one for the admins, if I save all the states into cookies or the local storage, is this not a problematic security wise?
    I will be using the laravel passport API, so 1 token is stored in the front end, the problem is....storing the token in a local storage or cookies seems to me a bit insecured. Any idea how to go around this please?

    Thank you

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,996
    Thanks
    36
    Thanked 1,072 Times in 1,068 Posts
    2.) Yes this is very risky. Set your permissions in the database.

    1.) I have always used PHP session variables to keep track of logged in users. Lots of info on them here (Use search top right) or on the internet. This may be useful (I didn't read it, just a fast scan) https://www.sitepoint.com/users-php-sessions-mysql/
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts
    Thanks Sunfighter for the reply.

    The problem with a vue.js app is that everything is on the client side. So using PHP sessions to keep the user login state won't work.
    I did a lot of reading today and I came to the conclusion that the login state can only be saved in the local storage(but does not give persistent state) or cookies in the user browser. Both solutions have their own risks.

    The only security left I have is to get this passport token to work perfectly from the Laravel side and have the whole site on https. At least, even if someone hacks the client side and changes the user role, then the API won't give the resources to the user.

    Thanks again for your feedback.

  4. #4
    Regular Coder
    Join Date
    Sep 2014
    Posts
    311
    Thanks
    1
    Thanked 55 Times in 53 Posts
    You are right, Node does not have a concept of session. Try the plugin you found and see if it will works for you.

    In the node projects that I have, I normally save the state of conversation in the database. That is, I send a cookie that is associated with the entry in database. When next request is received, I check the cookie and uses it to restore the state of the conversation.

  5. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,996
    Thanks
    36
    Thanked 1,072 Times in 1,068 Posts
    If you're using Vue to control the login state of a user, then your doing it wrong. Use PHP and session var..
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #6
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts
    If you are using cordova, there is no way to have PHP as Android does not support PHP. You are left with an app tha tonly uses html, css and JS. Therefore the state must be used in JS. You only use PHP for the restful api communications.
    My goal is to build like others do, an app that can be easely ported from a web app to cordova, all in html, css and js. I have seen tutorials online about saving the state and it is done either with Cookies as Josephm above explains or local storage.

    There are no other way around as PHP is not available to keep a state on.

  7. #7
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts
    k great got it here is the solution, vuex has a persisted state plugin:
    https://codesandbox.io/s/0yy7vk29kv

    https://stackoverflow.com/questions/...-logged-vue-js

  8. #8
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts
    just to let you know, I finally worked it out in practice.

    I installed 'cookie-universal-nuxt'. Then created an initial state in my actions as:

    Code:
      nuxtServerInit({commit}, {req}) {
        if ((this.$cookies.get('isLoggedIn') === true) && (this.$cookies.get('accessToken') !== undefined) && (this.$cookies.get('rid') !== undefined)) {
          commit('isLoggedIn', this.$cookies.get('isLoggedIn'));
          commit('setToken', this.$cookies.get('accessToken'), this.$cookies.get('rid'));
        } else {
          commit('isLoggedIn', false);
          this.$cookies.removeAll();
        }
      },

    With this method I can now reload/refresh the whole app and still have the user logged in.

    Now it is just a matter of creating routes with different user roles and use the Laravel token to access the resources.

    What I will do is also add an expiration to the cookie later on that is smaller than the one from the laravel cookie and have this cookie expiration checked when the app launches(or the page is refreshed), create an action that goes and fetch a new token via the API and update the cookies and states accordingly. I can only think about this way of doing it.

    Security wise I checked this as well and if I set the cookie to HttpOnly (HTTP) and Secure it will be enough to protect the user against session hijacking.

  9. #9
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,996
    Thanks
    36
    Thanked 1,072 Times in 1,068 Posts
    learningprobs you keep throwing me curve balls. cordova was never mentioned in the original post, but never mind it's still client side.

    Where I am now cross eyed here is - you are saying your making an app that will not use anything on a web server - no cloud service, just user side stuff that shows on a browser. Is that right? Then why do you have a log in? and why do you have two admin panels? and this line:

    I will be using the laravel passport API,...
    which works with - oh no - PHP?

    At this point I am just curious. Happy you have a solution that you think works, but to me your just saying you want a secure login to a program that and your going to secure that login using javascript. Good luck
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  10. #10
    Regular Coder
    Join Date
    Sep 2014
    Posts
    311
    Thanks
    1
    Thanked 55 Times in 53 Posts
    Quote Originally Posted by sunfighter
    At this point I am just curious
    There is no apache or IIS or whatever that serves as a server. Only Node.JS

    In node.js, the V8 engine (server side) runs javascript.

    It is a liitle bit confusing as both the client and server runs javascript.

    I know very little about vue (actually nothing). I looked at the plugin that learningprobs found, and it looks like it runs server side.

    I hope it clears it up.
    Last edited by josephm; Mar 13th, 2019 at 01:52 AM.

  11. #11
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,996
    Thanks
    36
    Thanked 1,072 Times in 1,068 Posts
    No joseph it doesn't. You are the only person that has said anything about Node.JS The OP talks about frameworks for JS and PHP. My curiosity is why he says he will not be working serverside.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  12. Users who have thanked sunfighter for this post:

    learningprobs (Mar 13th, 2019)

  13. #12
    Regular Coder
    Join Date
    Sep 2014
    Posts
    311
    Thanks
    1
    Thanked 55 Times in 53 Posts
    Quote Originally Posted by learningprobs
    I have prepared a restful api with Laravel and would like to communicate with a VUE app
    Sorry, but I'm probably a little bit confused. My interest in veu started when somebody started a thread in general website asking information about VUE/ Node.JS and NPM. The thread in general web building

    Quote Originally Posted by gennivee
    I have a complete website template in HTML, CSS, SCSS, JS, Vue components, and Bootstrap
    from this place: https://www.creative-tim.com/product...rial-dashboard
    All the while, I thought they were started by the same person.

    Still, as I understand, based on that thread the Vue is a node.js application, even though they were posted by 2 different people.

    ETA:

    This is sample code taken from the link to the plugin provided by learningprobs.

    Code:
    import Vue from "vue";
    import App from "./App";
    import Vuex from "vuex";
    I might be wrong but I don't think "browser" javascript support import, require, module.exports. I know that node.js at least support require and module.exports.

    more ETA

    before I forget,

    I downloaded the sample veu application from the link provided by the original person asking for info about node.js and npm. I am pretty sure that the sample code that I downloaded/run is a node.js application
    Last edited by josephm; Mar 13th, 2019 at 07:47 AM.

  14. #13
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts
    My apology, in fact it is a bit confusing because when we say "Vue app", it does not mean a web app as with NUXT you can now generate all your vue files in pure html and port the final to any non web applications. A lot of people use reactive frameworks for mobile applications or desktop(electron) applications.
    https://nuxtjs.org/guide/commands/ (the last command).

    I will explain the original project I was working on and why I decided to move to Vue.
    I have created a website with 4 types of roles(with laravel), each type of role has a totally different admin panel. What I did was build a jquery Android app with framework 7 as the UI and created my own routing and role/permission logic.
    So for example when role 1 logs into the app, the user has to see a very specific type of tools. I use the Laravel API to pass the oAuth Token + roles back to the app and save this into an sql lite. I also use the API for the CRUD actions. Each time the app is offline, stops, crashes and so on, a new call is sent to the API server and all the updates are redownloaded to the local SQLITE.

    It is working ok, but it is not smooth and inputting all this data into sqllite seems to slow down things. I have also had a very hard time doing certain things easily with Jquery, ie:Multiple roles login and routing.

    This is where I turned to Vue while keeping my original Laravel API.
    When you said about using PHP, I thought you meant hooking the app into the views of Laravel which can be done for a web app but not for an app that is in pure vue that you wish to export to different technologies like Cordova or electron.
    In fact I will stop hooking my future projects to blade or inside PHP frameworks because I realized that if you develop a single app in pure JS, you can move it anywhere and even change your original PHP API to anything else without affecting your app, it is a lot more bullet proof. I realised that when I developed my last project on Laravel and wanted a copy of the idea to Cordova...well was stuck because everything was going through blade.

    In reply to Joseph, yes you are right, import will not work from plugins but that it not a problem today with Vue, as you generate everything as html/js and all your imports will create separate JS files in your assets folder.

    Also the reason I am using NUXT is because nothing is pre-rendered server side as everything is pre-generated by the NUXT generator before you upload your app anywhere.

    I hope this will answer your questions.

    I advanced last night with my app. I now have my login with cool animations, registration and access to my 4 types of admin panels in vue. Tomorrow I will work on the role based routing restrictions and resources access using:
    Code:
      beforeRouteEnter (to, from, next) {
        if (store.state.users.length === 0) {
          store.dispatch(fetchUsers)
            .then(next);
        }
      },

    I do not know about you(you might think the total opposite) but I have always loved building solutions(mechanical engineering background), when I moved to coding, I thought, great, I will be building solutions full time! But I came to realize that you spend a lot more time learning the tools you want to use per project rather than build the actual solutions, which in a way is a bit sad as customers tell you the technology you have to use rather than you telling them what might be better for them..... Last time I spoke to the boss of a company who wanted a react app absolutely, I asked why not vue? And he said "I heard react was better and cooler". So this is how things are today, people choose the framework for you based on what they hear but no more on project requirement and specs(react might not be worth in this case for example)..

    I know people who build solutions on the Rasberry PI, You pretty much always have the same hardware and language, you can focus full time on solutions as nothing ever changes(apart from new gadgets being added to the list), only the program you build. I think in the future I will try to move into this type of programming as they are too many moving parts and frameworks in mobile app and web applications nowadays, the fun is gone for me, what about you?

  15. #14
    Regular Coder
    Join Date
    Sep 2014
    Posts
    311
    Thanks
    1
    Thanked 55 Times in 53 Posts
    @learningprobs

    Thank you for clarifying. As I said, I know nothing about VUE. It gets confusing when, where ever I look, I see node.js. For example, in one of the links you provided, it says installation is through NPM. As far as I know, NPM and NODE.JS goes hand in hand. Guess I assumed wrong.

    I too, love learning new things. My background is mainframe, starting from 1974 to 1995. For a few years now, I do part time work for a group of children with disabilities. I maintain their websites, the apps, both IOS and android, and the main reason I do it is that I learn new things.

    Because of my background, I am the type of person who hates layer upon layer of complexity. For example, to me, using a bloated framework, means I will have to invite the relatives, friends and enemies of the functionality I want to use. Having said that, I'd like to know more about VUE.

    Again, thank you.

  16. Users who have thanked josephm for this post:

    learningprobs (Mar 13th, 2019)

  17. #15
    Regular Coder
    Join Date
    Jan 2016
    Posts
    274
    Thanks
    53
    Thanked 3 Times in 3 Posts
    Oh I see where the confusion is. Ok let me explain.

    To use npm you need Node.js on your dev machine as it is just a server environment that you use to run certain commands, but this is only for dev purposes. The app itself does not need node.js after it gets generated. In fact I can upload it to a normal server(without Node.js) and it will work straight out of the box because it will only render html, css and js server side. You then use PHP for the restful API part of the work.

    And yes I do agree with you 100%. In fact I will continue playing around with PHP frameworks for perhaps 1 more year and will just use PHP "AS IS" for my back-ends and run all on vue, I will not learn anything else(apart from Python if I want to mess around with the Rasberry Pi). Right now I am trying to understand more the security and OOP concepts of a framework, this is quiet interesting. But all the gadgets that are added to it + multiple released versions that kees coming in is just too much for me.

    Last week I wanted to start building a game with my kids......realized that it was again another language created by the game maker engine itself.......I gave up.

    Thanks to you too & good luck working with kids who have disabilities, great job!


 
Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •