Implementing Authorization Rules for Drag and Drop Feature in Rails with Petergate
With the drag and drop feature built out, now it's time to ensure that only authorized users are allowed to change the position of portfolio items. In this guide we'll walk through how to implement authorization rules to the drag and drop functionality.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Our new drag and drop feature is working quite nicely, we simply have to implement a few security measures to make sure that it is only used by the developers and users who should have access to that feature. In this guide, we're going to update our authorization engine so that it matches these sets of rules that we want.

Come to the portfolio section of the app, right now I'm logged in and I can move things around, everything is working. If I click log out, then don't login, if I come back to the portfolio you're going to notice that a regular user has the ability to perform the same drag and drop functionality and it updates everything. That's usually not a good idea to have a regular guest user be able to make changes like that to your portfolio. You're most likely going to want to have that presented exactly the way you want.

We can simply implement and extend our authorization engine through petergate, open sublime Text, we only need to make two very small changes.

We need to go into the portfolio controller and add our sort method to the list of exceptions here for users. That's all we need to do for the controller. 

access all: [:show, :index, :angular], user: {except: [:destroy, :new, :create, : update, :edit, :sort]}, site_admin: :all

If we go to our index action for portfolios (app/views/portfolios/index) we can can use some embedded ruby. We can make this so only authorized users can perform this action. 

<div class="album text-muted">
  <div class="container">
    <div class="row <%= "sortable" if logged_in?(:site_admin) %>">
      <%= render partial: 'portfolio_item', collection: @portfolio_items %>
    </div>
  </div>
</div>

Hit refresh, now the drag and drop function is no longer working unless you are a site admin.

If you click and inspect, you will see this only has a class of row. It doesn't have the class of our original sortable class. We are hiding it on the controller side (server-side validation) and on the front end, which is considered a best practice.

large

Let's verify that everything is still working for our admin user. Log in and go back to the portfolio, click inspect and we should be able to see our sortable classes there.

large

One thing that's interesting with the way that the code libraries that we've integrated work, they add this ui-sortable library and they add other ones like ui-sortable-handle. There's a lot of things going on and those are occurring on the jquery side with the libraries we've integrated.

If move the portfolio in slot 1 to slot 2, hit refresh, everything stays exactly where it is.

  • git status
  • git add .
  • git commit -m "Implemented authorization rules for portfolio controller and view for drag and drop feature"
  • git push origin javascript

Let's go get checked out master and perform a pull request and merge everything in. On GitHub

  • click "compare & pull request
  • add a description like "implemented full drag and drop functionality into portfolio feature."
  • click Create pull request.
  • click merge pull request
  • confirm merge

Let's pull the code locally

  • git pull

Coming back to a pivotal tracker, we're going to say that we implemented security. In the next guide, we're going to have our CoffeeScript deep dive. We're going to take a little bit of a step back. We're going to get away from our application and I'm going to walk through some of the more basic items around CoffeeScript.

Resources