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 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
Vue通过input筛选数据
Oct 26 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
基于php实现的php代码加密解密类完整实例
2016/10/12 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
javascript 函数调用规则
2009/08/26 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
业务员岗位职责范本
2013/12/15 职场文书
项目经理任命书内容
2014/06/06 职场文书
创先争优个人承诺书
2014/08/30 职场文书
产品调价通知函
2015/04/20 职场文书
卫生主题班会
2015/08/14 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
python+opencv实现目标跟踪过程
2022/06/21 Python