Vue使用sessionStorage实现登录拦截

登录拦截

• 登录拦截就是在用户没有登录之前就阻止用户访问那些指定需要登录权限的页面，就只有当用户完成登录后才可以访问这些界面

路由拦截

• ​ vue组件化的开发就是使用vue-router进行页面跳转的，所以登录拦截需要处理一下路由，让用户在没有登录成功之前一直处于登录界面。
• 就算用户在地址栏进行输入地址也会直接返回登录界面

sessionStorage和localStorage介绍

• 在JavaScript中有两个属性：sessionStorage和localStorage，二者均可以将数据保存下来，其中：
• sessionStorage是会话存储，数据保留至关闭当前页面，刷新是不会丢失数据的
• localStorage是本地存储，数据会一直保留，除非手动删除该数据
• 一般来说，sessionStorage可以用于保存token（就是后台做的安全，用户需要先登录，拿到token后才能获取其他数据），而localStorage可以用于记住密码，将密码保留在本地，之后就不用再输入密码了

实现过程

1.定义路由

• 定义路由的时候，在meta属性中加一个存放属性来判断该路由是否需要检查（如果为true，那就需要检查，在满足条件是才可以跳转到该路由）
• 在router的js文件中，添加meta属性：requireAuth: true

const routes = [
  {
    path: '',
    // 重定向：初始为login界面
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login/login'),
    meta: {
      title: '登录'
    }
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/register/register'),
    meta: {
      title: '注册账号'
    }
  },
  {
    path: '/changePwd',
    name: 'changePwd',
    component: () => import('../views/changePwd/changePwd'),
    meta: {
      title: '修改密码',
      requireAuth: true
    }
  },
  {
    path: '/main',
    name: '首页',
    component: () => import('../views/Main'),
    meta: {
      title: '首页',
      requireAuth: true
    },
    children: [
      {
        path: '/',
        // 重定向：初始为当前实验界面
        redirect: '/currentexp'
      },
      {
        path: '/currentexp',
        name: '当前实验',
        component: () => import('../views/currentExperiment/currentExperiment'),
        meta: {
          title: '当前实验',
          requireAuth: true
        }
      },
      {
        path: '/bms',
        name: '电池监控',
        component: () => import('../views/bms/Bms'),
        meta: {
          title: '电池监控',
          requireAuth: true
        }
      },
      {
        path: '/setting',
        name: '工艺设置',
        component: () => import('../views/setting/setting'),
        meta: {
          title: '工艺设置',
          requireAuth: true
        }
      },
      {
        path: '/expdata',
        name: '实验数据',
        component: () => import('../views/expData/expData'),
        meta: {
          title: '实验数据',
          requireAuth: true
        }
      }
    ]
  },
  {
    path: '*',
    name: 'NotFound',
    component: () => import('../views/NotFound'),
    meta: {
      title: '404'
    }
  }
]

2.添加登录拦截

• 在login.vue文件中，添加：sessionStorage.setItem('isLogin', 'true')

   const loginInfo = new FormData()
          loginInfo.append('userName', this.loginForm.username)
          loginInfo.append('passwd', this.loginForm.password)
          console.log(loginInfo)
          login(loginInfo).then(res => {
            alert(res.data.msg)
            console.log(res.data.msg)
            if (res.data.code === 200) {
              sessionStorage.setItem('isLogin', 'true')
              // this.$router.push('/main')
              this.$router.replace('/main')
              this.$store.dispatch('asyncUpdateUser', { name: this.loginForm.username })
            }
          }).catch(res => {
            alert(res.data.msg)
          })

• 在退出登录时，需要清除sessionStorage中isLogin的状态：sessionStorage.clear()

logout () {
      sessionStorage.clear()
      this.$router.push('/login')
    }

3.路由设置

• 在router的js文件中，添加：

router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title // 显示标题
  // next()
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (sessionStorage.getItem('isLogin') === 'true') {
      next()
    } else {
      // 未登录，跳转到登录页面
      next('/login')
    }
  } else {
    next()
  }
})

4.网页调试查看

• 登录成功后，在控制台使用F12查看Application，isLogin的值为true
  

• 退出登录后，isLogin的值被清空

•