Implementation of single sign-on function in vue

  1. Business requirements are as follows: when accessing the domain name / project, a request will be sent to the backend to determine whether it is logged in, jump directly if it is logged in, and jump to the login page if it is not logged in;
    2. The problem encountered by
  2. : axios automatically redirects 302 when sending query login request, resulting in not getting JSON data; using axios.defaults.headers.common ["XmurRequestedlyWith"] =" XMLHttpRequest"; seems to solve the problem, but redirecting after login does not jump to the home page, as if the TOKEN returned by login is not brought with it.
  3. excuse me, how should axios? be encapsulated? Bring TOKEN to every request in the future. Where should the request for login judgment be made? I am currently sending it in APP.vue.
  4. Thank you.
Vue.js
Nov.03,2021

you can store token in one place and encapsulate axios
including request parameters
here is a simple encapsulation example
due to different request methods, request parameters will appear in both data and params. Please note 

import axios from 'axios';
import Cookie from '../util/cookie'
// 
axios.defaults.timeout = 5000;
// 
axios.defaults.baseURL ='';
//http request 
axios.interceptors.request.use(
  config => {
    // token
    const token = Cookie.get('cc_token');
    // 
    config.headers = {
      'Content-Type':'application/json',
    };
    // tokenheaders
    if(token){
      config.headers.token = token
    }
    //
    if(config.method === 'get' && config.url !== '/api/admin/login'){
      config.params = config.params || {}
    }else if(config.url !== '/api/admin/login'){
      config.data = config.data || {};
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);


//http response 
axios.interceptors.response.use(
  response => {
    if(response.data.code === 501){
      // 
      router.push({
        name:'login'//
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
);


/**
 * get
 * @param url
 * @param params
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    }).then(response => {
        if(response.data.code === 200){
            //
          resolve(response.data.data);
        }else{
          Message.error(response.data.msg)
        }
      })
      .catch(err => {
        reject(err);
        let message = '';
        if(err.response)message=err.response.data.message;
        MessageBox({
          title:'',
          message:message,
          type:'error',
        })
      })
  })
}

Previous: Postcss-write-svg implements 1px frame

Next: Error: Requires Babel "^ 7.0.0-0", but was loaded with "6.26.3"

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e615dc-45913.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e615dc-45913.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?