Skip to main content

Posts

Showing posts with the label Ionic

Ionic&Vue Application Integrate Side Menu With ion-menu Component

In this article, we are going to learn about the steps to integrate the side menu using the 'ion-menu' component in the Ionic&Vue application. 'ion-menu' Component: Using the 'ion-menu' component we can develop a verticle side menu for our mobile ionic application. The menu should be rendered as a sibling element to the root content element. Mostly the root content element in our Ionic&Vue application is 'ion-router-outlet', so our menu element should be the sibling to it. So to operate on the menu component we have to use the 'menucontroller' that loads from the '@ionic/vue'. The key terms we need to remember while implementing the 'ion-menu' component: menucontroller: The 'menucontroller' helps to operate on our menu like opening and closing of the menu. It's not ideal to use multiple menus in the application but ionic supports to render multiple menus so to open them from anywhere of entire application it is

Part-2 Ionic&Vue JWT(JSON Web Token) Authentication(Refresh Token Implementation)

In  Part-1  we have learned about user authentication using the jwt access token in the Ionic&Vue application. This is the continuation article here our main goal to use refresh token on the expiration of the access token. 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 Use Access Token As Authorization Header To Secured Endpoint: Now we will consume the secured endpoint(in our sample 'Todos' endpoint) by sending the access token value as the authorization header. So to work with the todos endpoint let's create a separate store module as below. src/store/modules/todo.js: import axios from "axios"; const store = () => ({ todos: [], }); const getters = { getAllTodos(state) { return state.todos; }, }; const actions = {

Part-1 Ionic&Vue JWT(JSON Web Token) Authentication(Access Token Implementation)

In this article, we are going to understand the implementation steps on jwt authentication in the Ionic5 Vue application. Here our main concentration is on the jwt access token to make the user authentication. What Is JSON Web 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 Sample App Of Ionic5 Using Vue : To begin to create an Ionic application, we should have the Ionic CLI installed in our system environment. Command to install latest Ionic CLI: npm install -g @ionic/cli@latest Now run the following command to create Ionic5 using the Vue application. Command to create Ionic Vue application ionic start your_app_name blank --type vue Now run the following command to install Vuex into our Ionic&Vue app. Vuex Command npm install vuex@next --save TypeScript Or Javascript: By default Ionic sample created with the support of TypeScript in any library like angula

Ionic & Vue Sample Application Using Vuex State Management

In this article, we are going to create a sample application of Ionic & Vue our main target is to implement Vuex State Management. Create A Sample App Of Ionic5 Using Vue : To begin to create an Ionic application, we should have the Ionic CLI installed in our system environment. Command to install latest Ionic CLI: npm install -g @ionic/cli@latest Now run the following command to create Ionic5 using the Vue application. Command to create Ionic Vue application ionic start your_app_name blank --type vue Now run the following command to install Vuex into our Ionic&Vue app. Vuex Command npm install vuex@next --save TypeScript Or Javascript: By default Ionic sample created with the support of TypeScript in any library like angular, react, and vue. Typescript can be chosen to develop our application. But in the case of Vue most of the developers or preferred to choose javascript syntax instead of Typescript for application development. So to make our Ionic Vue application use j