Using vuejs how to secure the admin panel

Question

I have just started learning VueJS. I am using vuejs to call an external api that does CRUD operations for my application. The CRUD operations are made in the admin panel (http://domain.com/admin-dashboard) which requires a username and password. The external api endpoint provides an api/auth endpoint that accepts a username and a password and if the details are correct provides a JWT token. This token should be used when making the api request for the CRUD operations by passing the token in Authorization header Bearer xxx (where xxx is the token id)

Well everything works fine till here. But the problem is how do I stop someone from accessing the /admin-dashboardpage using vuejs? Earlier the traditional way of doing this in php is something like this:

<?php
session_start();
if(empty($_SESSION['is_logged_in'])){
 // Redirect to login page
 header('Location login.php');
 exit();
}

This way i can be sure that no unauthorized user can access the dashboard. But now since my entire app is based on vuejs, how do I secure the admin-dashboard page?

Any help will be appreciated.

Austio · Answer 1 · 2017-11-20T23:09:16.340

3

If you don't want data leakage, then everything on the backend api should be authenticated and authorized exactly like before you moved to vue.

So you should do two things

FRONT: Setup a route constraint in vue to redirect if someone is not authorized OR just display 'not authorized'. You can do this by returning a context along with the user that lets you know the context or have an api request to get the admin info and return a not authorized if they are not and display the notice based on that request. Pros and cons to either.
BACK: In your server check that the user has access before getting into the meat of the request. I have not used php in a long time, but in rails we just setup a before_action in the controller that checks current_user against whatever requirements we have for them to access.

Hope that helps.

edited Nov 20 '17 at 23:09

answered Feb 12 '17 at 20:42

Austio

5,448
17
32

1

This is not a "security" problem but a big business issue! if admin panel is not hidden, a malicious user can see how the panel looks like AND what those admin are actually capable of doing! this is definitely a problem. – Amirreza Nasiri Jul 18 '19 at 20:01
Although I agree that you increase your attack surface / ease of exploit by exposing the routes, the main concern is locking down the apis on the back along with the front. Even better if you are using something like nuxt that will not deliver the entire bundle on every request. – Austio Jul 19 '19 at 02:35

score 3 · Answer 2 · answered Jul 25 '17 at 13:19

If you are using Vue-Router, you can add a before hook to the routes to ensure authorization. You can pass some kind of variable along with your token and set it in localStorage or in Vuex state.

router.beforeEach((to, from, next) => {
    if(/admin/.test(to.path)) { // Using regex to test the URL path
       if(store.state.user.is_admin){ // Assuming is_admin is a boolean in Vuex state
           next() // Allows it to proceed
       } else {
           next('/login')  // Or make a 403 page or whatever
       }
    }
}

Of course you must secure the backend, as other comments have said, but your question was particularly about how to not allow navigation on the frontend.

score 1 · Answer 3 · answered Jul 06 '17 at 09:19

What are you using on the server? Lotsa PHP folk are sticking with PHP, it would seem. In any case, the problem stays the same. Authorization and authentication are always server responsibilities. When servers respond to ajax requests, it's effectively bad form to redirect to a login page. You should be sending a 401 Unauthorized or 403 Forbidden. Your front end will never show unauthorized data because your backend will never send it.

In vue, you need to manage the JWT. How long will it last and where will you store it. Will you be sending it in a cookie, or in a header? Then you need to manage 401/403 responses to ajax calls (show the login screen). You're taking a big bend when you switch from server-generated pages to SPA. Make sure you get your head around the new paradigm :-) I'm not sure I have.

Using vuejs how to secure the admin panel

3 Answers3