vue登陆登出指南

最近接手的B端项目选择了vue来做，此项目使用element ui Message等为组件 望周知

需求

登陆成功后跳转至首页
首页不能手动跳转至登陆页
登陆后跳转至目标页面

此次B端SPA项目把ak存在localstorage中
1.登陆的跳转利用全局钩子router.beforeEach

//router.js
router.beforeEach((to, from, next) => {
  // 若userkey不存在并且前往页面不是登陆页面，进入登陆
  // 若userkey存在并且前往登陆页面，进入主页
  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带上目标参数
例子：#/login?redirect=%2Fapp
在登陆提交处还得对redirect参数进行处理

//若验证成功跳转
 var redirect = decodeURIComponent(this.$route.query.redirect || '/')
          self.$router.push({
            //  你需要接受路由的参数再跳转
            path: redirect
          })

需求

若ak失效后发送请求时弹出失效弹出框返回到登陆页面

以下做了个简单的例子若请求返回的参数带0则登陆失效

// respone拦截器
axios.interceptors.response.use(
  response => {
    console.log(response)
    const data = response.data
    if (data.status === 0) {
      MessageBox.alert('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
        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 = '请求错误'
          break
        case 401:
          error.message = '未授权，请登录'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = (process.env.NODE_ENV === 'production' ? `请求地址出错` : `请求地址出错: ${error.response.config.url}`)
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器内部错误'
          break
        case 501:
          error.message = '服务未实现'
          break
        case 502:
          error.message = '网关错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网关超时'
          break
        case 505:
          error.message = 'HTTP版本不受支持'
          break
        default:
      }
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
    }
    return Promise.reject(error)
  }
)

需求

手动登出

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

      })
    }

简单的登陆登出结束啦～欢迎提isssue～