![]() }).$mount('#app') Creating the middlewares Edit the src/main.js file with the code below: import Vue from 'vue' Next, let’s inject the router and our store into the Vue instance. At the moment, it’s important to note that none of these routes are protected. Here, we created a new router instance while passing in a couple of configuration options as well as a routes property which accepts all the routes we defined earlier. Import Dashboard from './components/Dashboard' Edit the file with the following code: import Vue from 'vue' Next, create a router folder in the src directory and then create a router.js file inside that folder. This route will be protected by a isSubscribed and auth middleware. dashboard/movies will be accessible to only authenticated and subscribed users. We’ll associate an auth middleware with this route. Unauthenticated users should be redirected to the /login route when they visit this route. dashboard will only be accessible to authenticated users. ![]() This route will have a guest middleware attached to it. When authenticated users visit this route, they should be redirected to the dashboard route. login will be accessible to everybody except authenticated users. Defining our routesīefore we create our routes, let’s define them and associate the respective middlewares that will be attached to each of these routes. We’ve also defined a getter inside the store that returns the user object. The user object contains a loggedIn and isSubscribed property which helps us determine if a user is logged in and has an active subscription. The store contains a user object within its state. Inside the src folder, create a store.js file and add the following code to the file: import Vue from 'vue' This will allow us to determine if a user is authenticated as well as check if the user is subscribed or not. This is the Movies component for authenticated and subscribed usersĪ store, in regards to Vuex, is simply a container for holding our application state. This is the Dashboard component for authenticated usersįinally, add the following code to the Movies.vue file: Navigate to the src/components directory and create the following files: Dashboard.vue Login.vue and Movies.vueĮdit the Login.vue file with the following code: Įdit the Dashboard.vue file with the following code: Movies - We’ll display this component to users that are signed in and have an active subscription. ![]() Login - This component will be displayed to users that have not been authenticated.ĭashboard - This component will be displayed to users that are signed in. Our application is going to have three components. Vuex - is a state management library for Vue Creating components Vue-router - is the official router for Vue.js Once the project directory has been created and installed, navigate to the newly created directory and run the following command from the terminal: npm i vue-router vuex vue create vue-middleware-pipeline Installing dependencies To get started, we’ll be using the Vue CLI to quickly scaffold a new Vue project. ![]() How then do we go about protecting the /dashboard/movies route to ensure that only authenticated and subscribed users have access to that route? By using a middleware pipeline, we can chain several middlewares together and ensure they are run in parallel. We already know that to access the dashboard route, you need to be authenticated. Using our hypothetical case study from the introductory paragraph, let’s say we have another route at /dashboard/movies, that we only want accessible to subscribed users. What is a middleware pipeline?Ī middleware pipeline is a stack of different middlewares ran in parallel with each other. In this tutorial, we’ll see how we can implement a middleware pipeline for a Vue app using Vue-Router. For example, let’s say we have a dashboard route that can only be accessed by authenticated users, we can make use of an auth middleware to ensure that only authenticated users have access to the dashboard route. Generally, when building SPAs there’s a need to protect certain routes.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |