vue通过router路由设置登录校验

在使用vue路由进行登录校验（表单中的数据和本地存储中的数据）的时候，可以使用前置路由守卫(初始化的时候被调用，每次路由切换之前被调用)进行校验

其中 src/router/index.js 中创建路由的代码如下

const route = new VueRouter({
  routes: [
    {
      name: "login",
      path: "/",
      component: Login,
      meta: {
        isAuth:false,//用于定义是否被进行校验
        title: "登录",
      },
    },
    {
      name: "school",
      path: "/school",
      component: School,
      meta: {
        isAuth:true,
        title: "学校",
      },
    },
  ],
});

//全局前置路由守卫-- 初始化的时候被调用,每次路由切换之前被调用
route.beforeEach((to, from, next) => {
  var userObj = JSON.parse(localStorage.getItem("userObj"));
  //判断是否进行校验
  if (to.meta.isAuth) {
    if (to.query.username === userObj.username && to.query.password === userObj.password) {
      next();
      console.log("登录成功!");
    } else {
      next("/");
      console.log("用户名或密码不正确");
    }
  } else {
    next();
  }
});
//暴露路由,便于在main.js当中引入路由
export default route;

在Login组件中的登录跳转路径如下

<button>
	<router-link :to="`/school?username=${username}&password=${password}`">登录</router-link>
</button>

本地存储当中的用户名和密码

登录成功：当在Login组件中点击登录的按钮之后，浏览器的地址栏上的路径改变

控制台输出登录成功

登录失败：当在Login组件中点击登录的按钮之后，浏览器的地址栏上的路径不改变，控制台输出用户名或密码不正确

注意点：

• meta属性可以在路由地址和导航守卫上都被访问到
• 在使用meta属性中是否授权的时候，需要在即将跳转的组件配置中写该属性（本案例是写在School组件的配置中）