vuex + axios攔截器 + 導航守衛實現登陸/註銷功能

基本思想

首先要知道登陸不單單是拿着用戶名和密碼經過接口發給後端就大功告成了（小白的我以前就是這樣認爲的）要從幾個方面考慮

• 異步登陸，經過登陸接口拿到token
• 利用vuex的state管理token、用戶信息等
• 利用axios攔截器，攔截每一次請求/響應來處理token

❝

token是用戶登陸成功的標識，每一次請求數據時都要發送token給後端驗證 & 接收後端返回狀態碼判斷當前用戶登陸狀態

❞

• 利用導航守衛進行登陸攔截
• 密碼傳輸加密（通常須要引入第三方加密，自行百度）

「如下代碼僅作參考」

登陸的基本實現

點擊按鈕觸發事件submitForm login.vue文件中

methods: {
 submitForm(formName) {  this.$refs[formName].validate(valid => {  if(valid) {  this.$store  .dispatch("userLogin", this.ruleForm)  .then(() => {  // 登陸成功的提示  this.$router.push("home");  })  .catch(response => {  // 登陸失敗的提示  });  }  } else {  // ...  }  })  } } 複製代碼

store.dispatch方法觸發Action

actions: {
 userLogin({ commit }, userInfo) {  return new Promise((resolve, reject) => {  // 當即執行userLogin方法，詳見下面的代碼  userLogin(userInfo.username, userInfo.password).then(response => {  const data = response.data.data  // 提交mutation來修改state  commit('SET_TOKEN', data.token)  // 調用setToken目的是把token存入到localStorage/sessionStorage/cookie中去  // state中定義token經過getToken()獲取token值  setToken(data.token)  resolve()  }).catch(error => {  reject(error)  })  })  },  // ...  } 複製代碼

axios攔截器

個人攔截器目錄是 /src/utils/request.js

// 建立axios實例
const service = axios.create({  baseURL: '/api', // 根據項目自行配置  timeout: 5000 // 請求超時時間 })  // request攔截器，在請求頭中加入token service.interceptors.request.use(config => {  if (store.state.user.myToken) { // 從store的state中拿到token  // config.headers.'後端接收token的名字'  config.headers.myToken = store.state.user.myToken  }  return config }, error => {  Promise.reject(error) })  // respone攔截器 service.interceptors.response.use(response => {  const res = response.data  if (res.errno === 501) {  // MessageBox是elementUI的組件，提示用  MessageBox.alert('系統未登陸，請您登陸', '錯誤', {  confirmButtonText: '肯定',  type: 'error'  }).then(() => {  // 登出  })  return Promise.reject('error')  } else if (res.errno === 502) {  // 寫法相似  } else {  return response  } }, error => {  // Message是elementUI的組件，提示用  Message({  message: '未知錯誤',  type: 'error',  duration: 5 * 1000  })  return Promise.reject(error) })  export default service 複製代碼

上面說過的userLogin() 目錄/src/api/login.js 與login.vue對應，統一存放請求代碼，方便維護

// 引入上面的攔截器
import request from '@/utils/request'  export function userLogin(username, password) {  const data = {  username,  password  }  return request({  url: '/login',  method: 'post',  data  }) } 複製代碼

導航守衛

在須要登陸才能進入的路由中添加meta: { requireAuth: true }

export default new Router({
 mode: 'history',  routes: [  // ...  {  path: '/login',  name: 'login',  component: login,  beforeEach: (to, from, next) => {  if (to.meta.requireAuth) { // 判斷是否須要登陸權限  // 判斷是否有token  if (store.state.user.myToken) {  next() // 知足條件就放行  } else {  next('/login')  }  } else {  next()  }  }  },  ] }) 複製代碼

總結

以上就是使用vuex + axios攔截器 + 導航守衛實現登陸的大體流程。涉及到登出（註銷）這裏沒有寫，不過登陸都會了註銷並不難，走個接口清空本地保存的token就能夠了。
如下是一些自問自答

• 爲何要使用vuex

❝

由於經過登陸獲得的用戶信息在多個組件中都會用到，使用vuex直接經過state或getter訪問變量很方便。但不要爲了使用vuex而使用vuex

❞

• 既然用了vuex爲何還要將token存放到localStorage/sessionStorage/cookie中去

❝

由於刷新會致使vuex的state中的變量重置爲初始值（「變量值會丟失」）

❞

• 那爲何要用vuex？

❝

... 上面回答過了

❞

[end]

本文使用 mdnice 排版