最近接手的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"htmlcode">

//若验证成功跳转
 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' "htmlcode">
 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,登出,vue登陆

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“vue实现登陆登出的实现示例”

暂无“vue实现登陆登出的实现示例”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?