Demand analysis

We when doing the project, involving an authorization problem, this is a common problem, one of our authorized to do so, is very simple, does not require any authorization authorization login information, normal landing is ok, and then after successful login interface returns an authorization information to us, writing in the response, So we get this new authorization information to request any other request, that is, the entire system for the operation of the interface needs to get the latest authorization information, so how does the latest authorization information come from? Actually every one interface not only need to add authorization information on the header request header, also need the latest authorization information back to the response, so that every time we use an authorization will get the latest information request authorization information, in this way, you can ensure that every request the authorization of use is the latest, This is a relatively secure access mechanism.

The implementation process

At first when I prepared to give every request and request header, and then after the end of each will be returned to the authorization information on the local store, so can directly every time meet the requirements, but in fact, there is one drawback is too redundant code, the code reusability is poor, but I am a vue novice users, A lot of files all don’t know how to use, so they start looking for information, actually this is my own to their own digging pit, because without actually began to develop before all requests should be encapsulated, so can the maximum extent in the process of processing the request something, but didn’t want to so much, I began to One of the problems was that I couldn’t change all the headers because the project had been written for a long time, so I finally found that it was possible to do this in main.js, so I finally tried to write the following code

Code implementation
/ * * *@interceptors.request * @ Add a common request header file for authorization. This is to intercept all request information, and then add the latest authorization information to the request header
axios.interceptors.request.use((request) = >{
      /**
       * undefined null '' === false
       * @type {{authorization: string}} * /
      request.headers.common = {
        'authorization' : localStorage.getItem('authorization')?localStorage.getItem('authorization') : router.push({path:'/login'})};return request;
});
/ * * *@interceptors.Response * @ Uniformly processes the returned data of the request and determines whether the user is authorized according to the returned data. If so, the user can directly get the authorization information and send the latest authorization information to the local storage. * /
axios.interceptors.response.use((response) = >{
      /**
       * message === success
       * @response.data.new_authorization If any authorization information exists, directly pass the authorization information to *@response.data.message === 'authorization invalid' If authorization is invalid, go back to the login page and log in again with the latest authorization information *@response ; Do not get it from the back end if there is an interface on the back end that does not return authorization information, directly print a message to the console *@type {{authorization: string}} * /
      if(response.data.new_authorization){
         localStorage.setItem('authorization',response.data.new_authorization);
         return response;
      }else if(response.data.message === 'authorization invalid'){
         router.push({path:'/login'});
      }else{
         console.error('do not get it from the back end'); }});new Vue({
      router,
      store,
      el: '#app'.render: h= > h(App)
    })
Copy the code

What I have written here may not be comprehensive, strictly speaking, it is certainly not comprehensive, but at present such problems can be basically solved, there are bugs, but it can be used as a reference. Thank you for reading. If anyone likes VUE, please follow me or contact me to learn and make progress together. I also want to contact more vUE gods to learn together.