前端注冊登錄的業務流程 - vue篇

項目中有一些路由是需要登錄才可以進入的，比如首頁，個人中心等等
有一些路由是不需要登錄就可以進入，比如登錄頁，注冊頁，忘記密碼等等
那如何判斷路由是否需要登錄呢？就要在路由JS里面做文章

登錄狀態驗證？

如項目是前后端分離開發，在這介紹vue開發的移動web項目->微信朋友圈

• 前端登錄注冊向后台發送請求，登錄成功后台返回登錄者用戶信息，並攜帶 token值進行存儲到 cookie 當中
• 用戶訪問后台的 API 需要攜帶 token字段驗證信息和后台 session進行驗證

判斷用戶是否登錄？

• 如前台訪問需要驗證 token的API沒有正常攜帶 token參數，即返回 指定的錯誤代碼
• 前端可根據后台返回的信息，在路由跳轉中做判斷。因為在這里使用的 axios做vue的請求模塊，所以此次項目采用的是在請求攔截模塊中根據后台返回的登錄狀態碼進行判斷

需要注意： 因為是路由router文件中使用vue-router做跳轉，在這里就不能直接使用this.$router進行路由跳轉，需要引入 vue-router的導出對象，
使用該對象進行路由跳轉功能 import router from '@/router'

request.interceptors.response.use(
  res => {
    // 如果用戶沒有登錄
    if (res.data.code === 1000) {
      router.push('/login')
      // 提示信息
      weui.topTips('還沒有登錄', 1000)
      // 用戶的cookie一般后台都設置了過期時間，如果cookie過期，就清除本地保存的用戶信息
      localStorage.removeItem('saveUserInfo')
    } else if (res.data.code !== 0) {
      weui.toast(res.data.msg || '請求后台錯誤')
    }
    return res.data
  },
  err => {
    return Promise.reject(err)
  }
)

用戶訪問需要驗證的 API返回狀態碼 1000就跳轉到登錄頁登錄

登錄成功保存用戶狀態信息

• 登錄成功，后台返回用戶的基本信息，包括 token、和用戶的基本信息
• token默認由后台指定存儲到 cookie中
• 登錄成功返回的用戶信息，保存到vuex中，（包括用戶的頭像、用戶名、id）
  注意： 因為是web端開發，用戶使用的是瀏覽器訪問網站，瀏覽器都具有刷新功能，而vuex的原理是一個公用的對象，存儲數據到這個對象當中，用戶瀏覽器執行刷新，保存的數據即清除，
  為了解決這個問題，采用在用戶刷新時，vue的destory銷毀鈎子函數中把vuex中的數據存儲到 localStorage中，下次訪問頁面時在 created鈎子中把本地保存的數據讀取賦值到 vuex中
• 這里采用，默認vuex中存儲的是直接讀取的 localStorage值復制到vuex中

export default new Vuex.Store({
  state: {
    // 存儲用戶登錄后的信息，默認啟動時從本地存儲中獲取值，如果本地存儲沒有值就空對象
    userInfo: window.localStorage.getItem('saveUserInfo')
      ? JSON.parse(window.localStorage.getItem('saveUserInfo'))
      : {}
  },
  mutations: {
    saveUserInfo (state, userInfo) {
      state.userInfo = userInfo
      // 保存到vuex，並保存到localstorage中
      window.localStorage.setItem('saveUserInfo', JSON.stringify(userInfo))
    }
  },
  actions: {
    saveUserInfo (context, userInfo) {
      context.commit('saveUserInfo', userInfo)
    }
  }
})