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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
vue点击当前路由高亮小案例
Sep 26 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
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缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python实现装饰器、描述符
2018/02/28 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python实现简易动态时钟
2018/11/19 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python中update的基本使用方法详解
2019/07/17 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
公司领导推荐信
2013/11/12 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
行政部主管岗位职责
2013/12/28 职场文书
投标单位介绍信
2014/01/09 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
nginx优化的六点方法
2021/03/31 Servers
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL