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(() => {

   })
  }

简单的登陆登出结束啦～

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue # 登陆登出 # 登出 # vue登陆 # Vue2.0 axios前后端登陆拦截器(实例讲解) # vue+axios新手实践实现登陆的示例代码 # 详解用vue.js和laravel实现微信授权登陆 # 基于vue-cli3和element实现登陆页面 # Vue 前端实现登陆拦截及axios 拦截器的使用 # 详解vue2.0+axios+mock+axios-mock+adapter实现登陆 # 详解springboot和vue前后端分离开发跨域登陆问题 # Vue 页面权限控制和登陆验证功能的实例代码 # vue+koa2实现session、token登陆状态验证的示例 # vue实现登陆功能 # 跳转 # 弹出 # 周知 # 首页 # 已被 # 不受 # 不存在 # 还得 # 来做 # 请登录 # 管理平台 # 不可用 # 大家多多 # 选择了 # 使用了 # 拦截器 # getItem # amp # login # path

返回目录在线咨询

上一篇：Counter在python中两种用法
下一篇：如何利用百度站长工具优化蜘蛛弛_SEO优化教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

vue实现登陆登出的实现示例

您的项目需求