1.封裝axios

main.js

import axios from 'axios'

//創(chuàng)建axios實(shí)例
const instance = axios.create({
    baseURL:   'ur',
    timeout: 1000,
})

// 請求攔截
instance.interceptors.request.use(function (config) {
  // 在請求之前做的事
  return config
}, function (err) {
  // 在請求錯誤后做的事
  return Promise.reject(err)
});

// 響應(yīng)攔截
let myInterceptors = instance.interceptors.response.use(function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    return response;
}, function (err) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(err);
})

// 移除攔截器
instance.interceptors.response.eject(myInterceptors)

// 判斷請求方式
export function request (type, url, params) {
  if (type == 'get') {
    return get(url, params)
  } else if (type == 'post') {
    return post(url, params)
  } else if (type == 'put') {
    return put(url, params)
  }
}

// get請求
function get(url, params) {
  return instance.get(url,params)
}
// post請求
function post(url, params) {
  return instance.post(url,params)
}
// put請求
function put(url, params) {
  return instance.put(url,params)
}

2.將登錄成功之后的token，保存到客戶端的sessionStorage中

原因：為了保證項(xiàng)目中除了登錄之外的其他API接口，比須在登錄之后才能訪問，而且該token只能在當(dāng)前網(wǎng)站打開期間生效，所以要將token保存在sessionStorage中

login.vue

 mounted() {
 function login(params) {
  return request(
    'post',
    // 拼接url（這個看后端傳參需求決定是否要拼接）
    `/rqcode/query?uid=${params.uid}`,
    {id: 2, 
     uid:22}.then(res => {
        console.log(res);
        // 判斷登錄
        if(res.status !== 200) {
          return this.$message.error('登錄失敗');
        }
          this.$message.success('登錄成功');
          // 生成token
          window.sessionStorage.setItem("token",res.data.token)
          // 路由跳轉(zhuǎn)
          this.$router.push('/home')
    })
  },
  )
};
}

3.掛載路由導(dǎo)航守衛(wèi)，保證只在必須登陸后才能訪問其他頁面

router.js

/ 掛載路由導(dǎo)航守衛(wèi)（寫在路由里面）
router.beforeEach((to, from, next) => {
  //判斷是否在登錄頁面
  if (to.path === "/login") return next()
  // 獲取token
  tokenStr = window.sessionStorage.getItem('token')
  //判斷是否攜帶token
  if(!tokenStr) return next('/login')
})

這篇文章是我在學(xué)習(xí)前端過程中所總結(jié)的登錄流程，如有不對的地方，望各位大佬能給出指導(dǎo)意見。