The Value Crew

Author: Bibhuti Poudyal

Bibhuti Poudyal is the co-founder and CTO of The Value Crew. During his past 5+ years of software development, he has worked with many people & companies across the globe. He believes building successful software requires not only code & designs but also positive emotions & empathy. Bibhuti spends his free time contributing to open source, reading, cycling, and rarely cooking.
BACK TO BLOG

Multiple usage of custom filters in Vue.js

Bibhuti Poudyal
January 10, 2021
2 minutes min read
Learn to use custom filters in Vue.js. Vue.js allows you to define filters that can be used to apply common text formatting.

A Vue.js filter is simply a function that takes an input, processes it and gives an output. Inside a Vue template, it is written after a single pipe and can also be followed by its arguments.

Example of Vue.js filter

But there can be some particular case where the filter functions are required to be used outside directive and mustaches. This article will show a simple mechanism to tackle the problem.

A custom filter can be registered either globally or inside components. Since we are doing it the best way, we will be registering it globally.

If you have many filters, its best to keep it on a separate folder inside separate files. For this particular case, I have kept it inside /src/filters.js

Place filters.js inside ‘src’

Now lets take a look inside filters.js file.

filter.js

As you may have noticed, the FILTERS object contains all of your filter functions. The key serves as filterId and the value as filter function

The file exports two things

  • FILTERS object
  • registerFilters function

That’s the main point. The registerFilters function registers all of the filter functions globally so that it can be used on any Vue component. The method is called inside the main.js file.

Inside main.js

Another cool thing about this approach is the ability to import those filter functions and use inside JavaScript logic.

Inside JavaScript logic of XXX.vue component

In many cases filter functions need to be used outside of directive and mustaches. This approach works best to handle this particular scenario. Moreover, it groups the filter functions at one place and makes a clear separation of logic inside vue application.

Like the code snippets used in this article. It’s generated using this awesome tool RamroCode 👌

Happy Coding !

Bibhuti Poudyal Co-founder & CTO

Bibhuti Poudyal is the co-founder and CTO of The Value Crew. During his past 5+ years of software development, he has worked with many people & companies across the globe. He believes building successful software requires not only code & designs but also positive emotions & empathy. Bibhuti spends his free time contributing to open source, reading, cycling, and rarely cooking.

Subscribe and get our latest Blog Posts right in your inbox
BACK TO BLOG

Infinite pagination with ElasticSearch

Bibhuti Poudyal
December 28, 2020
1 minute min read
Elastic Search always returns top 10 results by default. To get large volume of results, we need to user Search API. The Search API provides from and size parameters that can be used to retrieve predefined amount of data. But using from and size should be avoided to request very large volume at once. Reason: Search request works with […]

Elastic Search always returns top 10 results by default. To get large volume of results, we need to user Search API.

The Search API provides from and size parameters that can be used to retrieve predefined amount of data. But using from and size should be avoided to request very large volume at once. Reason: Search request works with multiple shards storing its requested hits into memory which leads into high memory + CPU usage.

Moreover Elastic Search has set the maximum limit of 10,000 hits to paginate using size and from parameters. It’s actually a safeguard mechanism of ES. More info can be found on ES-docs.

A scenario can exist where we need to paginate through ES and retrieve very large set of data. In such case search_after parameter can be used.

The code below shows retrieving data infinitely via elastic search JavaScript API

This approach requests for data until there is none left. This seems to be the most easier way to get all the data chunks by chunks. The most important thing to consider here is: Make sure you know how much data you are paginating through.

BACK TO BLOG

Dead Simple Authorization Technique Based on HTTP Verbs

Bibhuti Poudyal
October 13, 2020
4 minutes min read
Authorization is a basic feature of modern web applications. It’s a mechanism of specifying access rights or privileges to resources according to user roles. In case of CMS like applications, it needs to be equipped with advanced libraries and authorization techniques. But for minimal applications a full fledged library can be an overhead. I will […]

Authorization is a basic feature of modern web applications. It’s a mechanism of specifying access rights or privileges to resources according to user roles. In case of CMS like applications, it needs to be equipped with advanced libraries and authorization techniques. But for minimal applications a full fledged library can be an overhead.

I will discuss a dead simple authorization technique based on HTTP verbs, for this particular purpose.

Things to consider beforehand

This technique isn’t something you can implement anywhere. Use this only if your requirements match the particular scenario.

  • It works only for REST APIs. Everything happens on middleware layer. If you have a simple MVC based REST APIs, this is for you.
  • It heavily relies on the HTTP verbs and the URL naming convention. So API endpoints should be super clear and structured. Similar to some structure like this one.

List Products  : GET    /products
Product Detail : GET    /products/{id}
Create Product : POST   /products
Update Product : PUT    /products/{id}
Delete Product : DELETE /products/{id}

  • A URL can perform many stuffs; but all cannot be expressed just in its naming and HTTP verb. If you require complex authorization, you can’t just rely on this technique.

Lets implement the dead simple authorization technique based on HTTP verbs. For demo purpose we will be using Nodejs. You can implement it on any language and platform of your choice: core Nodejs, ExpressJS, aws Lambda etc..

Step 1: Encode user role into JWT Token

JWT token is the key thing here. It contains the user role encoded in it. The token is returned when user logs in.

const jwt = require(‘jsonwebtoken’);
const token = jwt.sign({
 …
 role: userData.role 
}, JWT_KEY);

On the next API call, the token is passed as the value of Authorization header field.

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdW...

Step 2: Decode token and check permissions

When request is sent to the web server with JWT token attached on header, it goes through a middleware layer. Inside the layer the token is extracted, decoded. To check for permission we require two information.

  • User role: decoded from token
  • Resource name: identified from request URL

The mechanism of retrieving HTTP verb and resource name may differ according to the language or framework being used. Above code is only for demonstration purpose.

The permissions for resources according to user roles are stored in the following manner. Each of the roles have access to certain resources. Within resources they can perform certain actions determined by HTTP verbs.

The method below returns whether the user is allowed to access the resource or not.

Based on the result, the API request can be forwarded to the next middleware layer/controller or the request can be denied with error response.

The approach may work only for certain use cases(as mentioned above). If you have the same scenario, instead of relying on heavy libraries you can implement the technique fast and easy.

What do you think about this technique ? Do you have some other better approach ? Please share it on the comments below.