"Translate" uses Vuex to resolve authentication in Vue

Translated text link: Scotch.io/tutorials/handling-authentication-in-vue-using-vuex

My translation station: Www.zcfy.cc/article/handling-authentication-in-vue-using-vuex

In traditional ways, many people use local storage to manage the tokens generated by client-side validation. A big problem is how to have a better way of managing validation tokens, allowing us to store larger user information.

This is the role of Vuex. VUEX Application Management status for Vue.js. For all components in an application, it is treated as a central store, and rules ensure that the state can only be changed in a predictable way.

Sounds a better choice for checking local storage often? Let's explore it together.

Building Application Modules

For this project, we want to create a Vue app that uses Vuex and Vue-router. We will create a Vue project using the Vue CLI 3.0来 and select Routing and Vuex from the options.

Execute the following command to start the creation:

$ vue Create Vue-auth

Follow the prompts in the dialog box to add the necessary information and select the options we need to complete the installation.

Next, install Axios:

$ NPM Install Axios--save

Configure Axios

We need to use Axios in many components. Let's configure it in global entirety so that when we need it, we don't have to introduce it every time.

Open ./src/main.js the file, and add the following:

[...] Import store from './store ' import Axios from ' Axios ' vue.prototype. $http = Axios;const token = Localstorage.getitem (' token ') if (token) {  vue.prototype. $http. defaults.headers.common[' Authorization '] = token}[...]

Now, when we want to use Axios within a component, we can use it this.$http , which is equivalent to Axios directly. We can also set the token to ourselves in the Axios head, 身份验证 so that if token is required, our request will be in control. In this way, when we want to send a request, we don't have to set tokens at any time.

Related courses: Vue creates an online store

When you're done, let's use the server to handle the authentication.

Create an authentication service

I've written about this before I explain how to use Vue-router to resolve authentication. Take a closer look at the section of Setup node. js Server.

Creating Components Login Component

Created Login.vue ./src/components under the directory. After that, add a template to the login page:

<template> <div>   <form class= "Login" @submit. prevent= "Login" >     
When you're done, add the Data property and bind it to an HTML form:

[...] <script>  Export Default {    data () {      return {        email: "",        Password: ""      }    },  }</script>
Now, let's add a method to the login:

[...] <script>  Export Default {    [...]    Methods: {      login:function () {let        mail = this.email let         password = This.password this        . $store. Dispatch (' login ', {email, password})       . Then (() = this. $router. push ('/'))       . catch (Err = Console.log (err))      }    }  }</script>
We are using Vuex's action- login to resolve the authentication. We can refine the actions into callbacks so that we can do some cool things in our own components.

Registering Components
Similar to the login component, we get one for the registered user. Create it in the component directory Register.vue and add the following:

<template> <div> 
Let's define these data properties that will be bound to the form:

[...] <script>  Export Default {    data () {      return {        name: "",        Email: "",        Password: ",        Password_confirmation: "",        is_admin:null      }    },  }</script>
Now, let's add a method in:

[...] <script>  Export Default {    [...]    Methods: {      register:function () {Let        data = {          name:this.name,          email:this.email,          password: This.password,          is_admin:this.is_admin        } this        . $store. Dispatch (' register ', data) and then       (() = > this. $router. push ('/'))       . catch (Err = Console.log (err))      }    }  }</script>
Security Components
Let's create a generic component that will be displayed when the user passes validation. The file is named Secure.vue , and add the following to go in:

<template>  <div>    
Open the ./src/App.vue file and add the following in:

<template>  <div id= "app" >    <div id= "nav" >      <router-link to= "/" >home</ router-link> |      <router-link to= "/about" >about</router-link><span v-if= "isLoggedIn" > | <a @click = "Logout" >Logout</a></span>    </div>    <router-view/>  </ Div></template>
If the user logs in, can you see the associated? Logout Very good.

Now, let's add logic to logout.

<script>  Export Default {    computed: {      isloggedin:function () {return this.$ Store.getters.isLoggedIn}    },    methods: {      logout:function () {this        . $store. Dispatch (' logout ')        . Then (() = {this          . $router. Push ('/login ')}}}    ,  }</script>
When the user clicks the Exit button, we are actually doing two things-calculating the status of the user verification and distributing the exit event inside the Vuex store. After exiting, we use this.$router.push('/login') , switch the user to the login page. Of course you can change any place you want users to jump to.

That's it. Let's build the Permissions module with Vuex.

Vuex Permissions Module
If you have read the previous Setup node. js Server section, you should note that we need to store user rights tokens locally, and when the user is granted permission, we need to get token and user information back at any time.

First, let's create a file for Vuex store.js :

Import vue from ' Vue ' import Vuex from ' Vuex ' import Axios from ' Axios ' Vue.use (VUEX) export default new Vuex.store ({  stat E: {    status: ',    token:localStorage.getItem (' token ') | | ",    User: {}  }, mutations: {}  ,  actions: {  }, getters: {}  })
If you notice that we've introduced both Vue,vuex and Axios, then let Vue use Vuex, because it's an important step.

We have defined the properties of state. Now the state of Vuex can support authentication status, jwt token, and user information.

creating Vuex Logon events
The Vuex actions are mostly submitted to the Vuex store. We will create an login action that will use the server to authenticate the user and submit user credentials to the Vuex store. Open the ./src/store.js file and add the following to the actions object:

Login ({commit}, user) {    return new Promise ((resolve, reject) = {      commit (' auth_request ')      axios ({url: ') Http://localhost:3000/login ', Data:user, Method: ' POST '})      . Then (resp = {        Const token = Resp.data.token        Const USER = Resp.data.user        localstorage.setitem (' token ', token)        axios.defaults.headers.common[' Authorization '] = token        commit (' auth_success ', token, user)        Resolve (RESP)      })      . catch (Err = {        commit (' Auth_error ')        localstorage.removeitem (' token ')        reject (Err)      })}    ,
The login action is commit validated by Vuex and we will use it to trigger the change. These changes can be recorded in the Vuex store.

We are calling the server's login path and returning the necessary data. We store tokens locally and then update the auth_success Stored user information and tokens. At this point, we also set up in the head axios .


   

 
    
 
     
We can store tokens in the Vuex store, but if the user leaves our app, all the storage in Vuex will disappear. To ensure that users do not have to log in again during the effective time, we can only store tokens locally.
 
     
The important thing is that you know how this works, so that you can decide what you want to achieve.
 
    

   
We return a promise so that we can respond when the user logs in.

Create Vuex 注册 event
Like login events, the register event is the same way of working. In the same file, add the following to the actions object:

Register ({commit}, user) {  return new Promise ((resolve, reject) = {    commit (' auth_request ')    axios ({URL : ' Http://localhost:3000/register ', Data:user, Method: ' POST '})    . Then (resp = {      Const token = Resp.data.toke n      Const user = Resp.data.user      localstorage.setitem (' token ', token)      axios.defaults.headers.common[' Authorization '] = token      commit (' auth_success ', token, user)      Resolve (RESP)    })    . catch (Err = {      commit (' Auth_error ', err)      Localstorage.removeitem (' token ')      reject (Err)    })}  ,
It login works much like the way events work. It's called having a common mutators login and register having the same goal-getting users into the system.

Create Vuex 退出 event
We want the user to be able to exit the system, and we want to destroy the last validated session data. In the same actions object, add the following:

Logout ({commit}) {  return new Promise ((resolve, reject) = {    commit (' logout ')    Localstorage.removeitem (' token ')    Delete axios.defaults.headers.common[' Authorization ']    resolve ()}  )}
Now, when the user clicks to exit, we will remove the token that was previously set in the axios header jwt . They will now be unable to perform transactions that require tokens.

Create Mutations
As I mentioned before, mutators is used to change the state of the Vuex store. Let's define the used mutators in the application. In the Mutators object, add the following:

Mutations: {  auth_request (state) {    state.status = ' loading '  },  auth_success (state, token, user) {    state.status = ' success '    State.token = token    state.user = user  },  Auth_error (state) {    State.status = ' ERROR '  },  logout (state) {    state.status = '    State.token = '},  },
Create getters
We use getter to get the value of the attribute in the Vuex state. In this case, the Getter's role is to separate the application data from the application logic and ensure that we do not disclose sensitive information.

Add the following to the getters object:

Getters: {  isloggedin:state =!! State.token,  authstatus:state = State.status,}
You will agree with me that this is a more concise way to access stored data ️.

hide a page behind auth
The whole purpose of this article is to implement authentication so that users without permissions cannot see certain pages. To achieve this, we need to know which page the user wants to access, and when the user is authorized, we have a way to verify it. We also need certain ways, if certain pages, authorized or unauthorized users can be accessed individually or concurrently. These are important considerations, fortunately, we can do it through vue-router.

define routes to authorized and unauthorized pages
Open the ./src/router.js file and introduce the things we need:

Import vue from ' Vue ' import Router from ' Vue-router ' to ' import store from './store.js ' import Home from './views/home.vue ' Impor T about from './views/about.vue ' import Login from './components/login.vue ' import Secure from './components/secure.vue ' Import Register from './components/register.vue ' Vue.use (Router)
As you can see, we've introduced Vue,vue-router and the Vuex we created. We also introduced all of the defined components and set up the use of routing in Vue.

Let's define the route:

[...] Let router = new Router ({  mode: ' History ',  routes: [    {      path: '/',      Name: ' Home ',      component:home    },    {      path: '/login ',      name: ' Login ',      component:login    },    {      path: '/register ',      name: ' Register ',      component:register    },    {      path: '/secure ',      name: ' Secure ',      Component:secure,      meta: {         requiresauth:true      }    },    {      path: '/about ',      name: ' About ',      component:about    }  ]}) export default router
The definition of our route is very common. For a route that requires permission validation, we need to add additional data to ensure that we can identify it when the user accesses it. This is the essence of the meta-attribute added to the route definition. If you want to ask, "Can I add more data to the metadata and use it?", I am very determined to tell you that this is absolute.

Troubleshooting unauthorized Access Examples
We have our own route definition. Now, let's examine unauthorized access and take action. In the router.js file, add the following export default router before:

Router.beforeeach (to, from, next) = {  if (to.matched.some (record = Record.meta.requiresAuth)) {    if ( Store.getters.isLoggedIn) {      next ()      return    }    next ('/login ')   } else {    next ()   }})
From this article, by using Vue router for authentication, you can recall that we have a very complex mechanism here, which becomes very large and becomes very confusing. Vuex has helped us simplify it, and we can continue to add any conditions to the route. In our Vuex store, we can define operations to check these conditions and get the values that return them.

example of resolving token expiration
Because we store tokens locally, it can be preserved all the time. This means that whenever we open our app, it can automatically authenticate the user, even if the token has expired and expires. Most of the situation, our request will continue to fail because of invalid token. This is a bad experience for the user.

Now, open the ./src/App.vue file and inside the script, add the following:

Export default {  [...]  Created:function () {this    . $http. Interceptors.response.use (Undefined, function (err) {      return new Promise ( function (Resolve, reject) {        if (err.status = = = 401 && err.config &&!err.config.__isretryrequest) { C5/>this. $store. Dispatch (Logout)        }        throw err;});}    )  
We intercepted the Axios request and determined if the response was obtained 401未授权 . If we do, we distribute logout the event, then the user gets out of the app. This will let the user jump to the previously designed login page so they can log in again.

I agree that this will enhance the user experience ️.

End
From the previous article, you can see that, based on the introduction of Vuex, our current application has undergone significant changes. Now, we don't rely on checking tokens all the time, and there are chaotic conditions wherever we go. We can simply use the Vuex store to manage permissions, and only use a few lines of code to check the state in the application.

I hope this will help you build a better application.