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


Posted in Javascript onSeptember 15, 2017

最近接手的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(() => {

   })
  }

简单的登陆登出结束啦~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自动更新作用
Oct 08 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
js中new一个对象的过程
Feb 20 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 #Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 #Javascript
vue用addRoutes实现动态路由的示例
Sep 15 #Javascript
Vue渲染函数详解
Sep 15 #Javascript
JavaScript中如何判断一个值的类型
Sep 15 #Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 #Javascript
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php adodb介绍
2009/03/19 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
浅谈Vue.use的使用
2018/08/29 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python写入CSV文件的方法
2015/07/08 Python
python学习 流程控制语句详解
2016/06/01 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
C++面试题:关于链表和指针
2013/06/05 面试题
求职推荐信范文
2013/12/01 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
元旦活动感言
2014/03/08 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
党支部承诺书
2015/01/20 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python