前端登录验证逻辑

项目场景：

项目场景：做一个前端登录验证，并把登录信息存放到本地，本地没有存放信息就没有登录成功

---

问题描述

提示：这里描述项目中遇到的问题：

1、不考虑是否登录的情况下，用户可以在网址输入栏随意更换路由，系统的安全性差，所有人可以任意访问。

2、进行身份验证，根据身份信息判断是否满足路由跳转。

   2.1 直接根据路由判断，会报错

 router.beforeEach((to,from,next) => {
   if (to.name !== 'Login') {
     next({ name: 'Login' })
   } else{
     next()
   }
 })

原因分析：vue官网中，关于路由守卫，有这样一句话：

 

 所以当路由非/login时，再一次做路径判断，那么路径就重叠了。

2.2 添加身份验证

  只要登陆成功，本地就会有验证信息。这样登陆后，路由跳转不会强转登录，也不会没有登录就可以切换路由。

router.beforeEach((to, from, next) => {
  let storage = JSON.parse(sessionStorage.getItem('loginInfo'))
  if (to.name !== 'Login' && !storage) {
    next({ name: 'Login' })
  } else if (to.name === 'Login') {
    next()
  } else {
    if (storage.userName === 'admin') {
      if (to.meta.role.some((item) => item === 'admin')) {
        next()
      } else {
        alert('你没有权限访问！')
        next({name:'Home'})
      }
    } else {
      if (to.meta.role.some((item) => item != 'admin')) {
        next()
      } else {
        alert('你没有权限访问！')
        next({name:'Home'})
      }
    }
  }
})