Tech Seeker

In the  Part-1  we have learned steps to build a VueJS application authentication by using an access token(Jwt token). This is the continuation article, here we are going to understand the steps for implementing refresh token and using access token in the request header to call secured API. NestJS(Nodejs) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our angular application. http://localhost:3000/todos Access Token Authorization To Access Secured Endpoint: Now let's try to access the secured endpoint 'todos' mentioned above in our 'Dashboard' page. Now for this todos, we are going to create another module file like 'todo.js'. src/store/modules/todo.js: import axios from 'axios'; const state = () => ({ todos :[] }); const getters = { getAlltodos(state){ state.todos; } }; const

In this article, we are going to understand the steps for JWT(JSON Web Token) authentication. Here our main focus to fetch the JWT access token to make users log into our VueJS 3.0 application. For maintaining user info we will use Vuex state management. JWT Token: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A VueJS 3.0 Sample Application: Let's begin by creating a VueJS 3.0 sample application. Command To Install Vue CLI Globally On Your System npm install -g @vue/cli Command To Create A Vue App: vue create your_app_name Required NPM Packages: Need to install the Vue routing library to configure routing into our application. Command To Install Vue Router Library(For Vue3.0) npm install vue-router@4 Need to install the Vuex Store library to configure state management to our application Command To Install Vuex Store Library(For Vue3.0) npm install vuex@next Install

In this article, we are going to understand the basic concept of routing in the VueJS 3.0 application. Create A VueJS 3.0 Sample Application: Let's understand routing concepts by doing a sample VueJS 3.0 application, so as a first step create a sample application. Command To Install Vue CLI Globally On Your System npm run -g @vue/cli Command To Create Vue App: vue create your_app_name The vue-router available as a separate library, so to install it run the following command. Command To Install Vue Router Library(For Vue3.0) npm install vue-router@4 After successfully installing the route library we can observe the route library reference in the package.json file. Create Vue Components: Let's create sample components like 'Home' and 'About'. We will load this component based on a route like pages. src/components/Home.vue: <template> <div> My Home Page </div> </template> <script> export default { } </sc

Part-1  shown startup steps like initial configuration of Hot Chocolate GraphQL library into the .Net5 Web API application. This is a continuation part here we are going to understand a few concepts like fetching data from the database, GraphQL mutations, different GraphL queries, etc. Configure EntityFrameworkCore Database Context: Now we need to integrate our database into our GraphQL endpoint by creating an entity framework core database context. Package Manager Command: Install-Package Microsoft.EntityFrameworkCore -Version 5.0.1 .Net CLI Command: dotnet add package Micorsoft.EntityFrameworkCore -Version 5.0.1 Package Manager Command: Install-Package Microsoft.EntityFrameworkCore.SqlServer -Version 5.0.1 .Net CLI Command: dotnet add package Microsoft.EntityFrameworkCore.SqlServer -Version 5.0.1 Now add your connection string into the app settings file. appsettings.Development.json: "ConnectionStrings":{ "MyWorldDbConnection":"Your_database_Connectio

In this article, we are going to understand the implementation steps of GraphQL in .Net5 application using Hot Chocolate Library. GraphQL: GraphQL is an open-source data query and manipulation language for APIs. It is a query language for your API and a server-side runtime for executing queries by using a type system you define for your data. GraphQL can be integrated into any framework like .Net, Java, NetsJS, etc and it isn't tied to any specific database or storage engine and instead backed by your existing code and data. GraphQL caries two important operations: Query - fetching data Mutation - save or update. Hot Chocolate GraphQL: Hot Chocolate is an open-source GraphQL server that is compliant with the newest GraphQL latest specs. It is the wrapper library of the original .Net GraphQL library. Hot Chocolate takes the complexity away from building a fully-fledged GraphQL server. An Overview On GrphQL SDL(Schema Definition Language): A syntax to data query and manipulation

Redis Cache: Redis is an open-source in-memory data structure store, used as a database cache. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, etc. Caching can significantly improve application performance and its scalability by reducing the workload to generate the content. If our server application runs on multiple servers then it is easy to share the Redis Cache between them. Setup Redis Docker Image Container: For this sample to use Redis instance locally we will use Docker. If you don't have any prior knowledge of docker, not a problem just follow the steps below.  Click here for a video session on Redis docker setup Note: Skip this section if you already have redis direct instance or azure or any cloud provider that have redis Step1: Download docker into our local system "https://docs.docker.com/desktop/" . Docker was available for all desktop operating systems. Step2: After downloading the docker installer, t