Vue前端简单的登录校验和规则

为了防止用户未经登录就可以访问一些页面，同时保证部分页面不经登录就可以访问，我们可以配置相关的参数，进行登录校验。

登录操作

（此处登录校验以纯前端方式实现，如果后端可以配置相关的redis，存储用户登录成功后的token，当进行路由变换时，发送请求，查询token是否有效）登录成功后，可以在session中存储相关登录的信息，除了是否登录，我们还可以把用户的用户名存储起来。

            //我们在登录成功后，可以在session存储此次登录结果
             sessionStorage.setItem('isLoggedIn', 'true');
             sessionStorage.setItem('userType', this.loginForm.username);

路由配置

我们在路径配置了一个meta参数，来设定哪些需要校验，然后配置了一个路由守卫，如果是需要登录的界面，当用户没有登录时，我们会返回至登录页面，如果是不需要登录页面，则可以直接访问。

import VueRouter from 'vue-router'
Vue.use(VueRouter)
//设置一个参数，meta: { requiresAuth: true }, 来分别哪些需要校验，哪些不需要校验。
const router  = new VueRouter({
    routes:[
    {
        path:'/',
        component:Layout,
        children:[
            {
            path:'/',
            name:'home',
            component:Home,
            meta: { requiresAuth: true }, 
        },{
            path:'/history',
            name:'history',
            component:History,
            meta: { requiresAuth: true }, 
        }
        
        ]
    },{
        path:'/login',
        name:'login',
        component:Login
    }
    ,{
        path:'/gasreport',
        name:'gasreport',
        component:Gasreport
    }

]});


// 添加路由守卫
router.beforeEach((to, from, next) => {
    // 检查路由是否需要验证登录
    if (to.matched.some(record => record.meta.requiresAuth)) {
        //检查是否登录了
      const isLoggedIn = checkIfUserIsLoggedIn(); 
      if (!isLoggedIn) {
        // 如果用户未登录，则重定向到登录页面
        next({ path: '/login' });
      } else {
        // 如果用户已登录，则允许导航到目标页面
        next();
      }
    } else {
      // 如果目标路由不需要验证登录，则允许导航
      next();
    }
  });
  
  function checkIfUserIsLoggedIn() {
    return sessionStorage.getItem('isLoggedIn') === 'true';
  }