vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例

更新時(shí)間：2017年09月15日 10:23:46 作者：AkiraSun

本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近接手的B端項(xiàng)目選擇了vue來(lái)做，此項(xiàng)目使用element ui Message等為組件望周知

需求

登陸成功后跳轉(zhuǎn)至首頁(yè)
首頁(yè)不能手動(dòng)跳轉(zhuǎn)至登陸頁(yè)
登陸后跳轉(zhuǎn)至目標(biāo)頁(yè)面

此次B端SPA項(xiàng)目把a(bǔ)k存在localstorage中

1.登陸的跳轉(zhuǎn)利用全局鉤子router.beforeEach

//router.js
router.beforeEach((to, from, next) => {
 // 若userkey不存在并且前往頁(yè)面不是登陸頁(yè)面，進(jìn)入登陸
 // 若userkey存在并且前往登陸頁(yè)面，進(jìn)入主頁(yè)
 const userKey = localStorage.getItem('userKey')
 if (!userKey && to.path !== '/login') {
  next({
   path: '/login',
   query: { redirect: to.fullPath }
  })
 } else if (userKey && to.path === '/login') {
  next({ path: '/' })
 } else {
  next()
 }
})

上面使用了query帶上目標(biāo)參數(shù)

例子：#/login?redirect=%2Fapp

在登陸提交處還得對(duì)redirect參數(shù)進(jìn)行處理

//若驗(yàn)證成功跳轉(zhuǎn)
 var redirect = decodeURIComponent(this.$route.query.redirect || '/')
     self.$router.push({
      // 你需要接受路由的參數(shù)再跳轉(zhuǎn)
      path: redirect
     })

需求

若ak失效后發(fā)送請(qǐng)求時(shí)彈出失效彈出框返回到登陸頁(yè)面

以下做了個(gè)簡(jiǎn)單的例子若請(qǐng)求返回的參數(shù)帶0則登陸失效

// respone攔截器
axios.interceptors.response.use(
 response => {
  console.log(response)
  const data = response.data
  if (data.status === 0) {
   MessageBox.alert('你已被登出，可以取消繼續(xù)留在該頁(yè)面，或者重新登錄', '確定登出', {
    confirmButtonText: '確定',
    type: 'warning'
   }).then(() => {
    localStorage.clear()
    router.replace({
     path: '/login'
    })
    return
   }).catch(() => {
    localStorage.clear()
    router.replace({
     path: '/login'
    })
   })
  } else {
   return response
  }
 },
 error => {
  if (error && error.response) {
   switch (error.response.status) {
    case 400:
     error.message = '請(qǐng)求錯(cuò)誤'
     break
    case 401:
     error.message = '未授權(quán)，請(qǐng)登錄'
     break
    case 403:
     error.message = '拒絕訪問(wèn)'
     break
    case 404:
     error.message = (process.env.NODE_ENV === 'production' ? `請(qǐng)求地址出錯(cuò)` : `請(qǐng)求地址出錯(cuò): ${error.response.config.url}`)
     break
    case 408:
     error.message = '請(qǐng)求超時(shí)'
     break
    case 500:
     error.message = '服務(wù)器內(nèi)部錯(cuò)誤'
     break
    case 501:
     error.message = '服務(wù)未實(shí)現(xiàn)'
     break
    case 502:
     error.message = '網(wǎng)關(guān)錯(cuò)誤'
     break
    case 503:
     error.message = '服務(wù)不可用'
     break
    case 504:
     error.message = '網(wǎng)關(guān)超時(shí)'
     break
    case 505:
     error.message = 'HTTP版本不受支持'
     break
    default:
   }
   Message({
    message: error.message,
    type: 'error',
    duration: 5 * 1000
   })
  }
  return Promise.reject(error)
 }
)

需求

手動(dòng)登出

 loginOut() {
   var self = this
   this.$confirm('您確定要退出嗎?', '退出管理平臺(tái)', {
    confirmButtonText: '確定',
    cancelButtonText: '取消'
   }).then(() => {
    const info = {
     'userkey': localStorage.getItem('userKey')
    }
    self.$store.dispatch('LogOut', info).then(() => {
     self.$router.push({ path: '/login' })
    }).catch(() => {
    })
   }).catch(() => {

   })
  }

簡(jiǎn)單的登陸登出結(jié)束啦～

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: