Vue项目进入页面前判断用户是否登录

最新推荐文章于 2024-01-01 15:28:08 发布

别派小狗去暗鲨

最新推荐文章于 2024-01-01 15:28:08 发布

阅读量2.9k

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_46403770/article/details/126904400

版权

需求：首次进入页面需登录，后续则无需登录直接进入页面，包括关闭页面再打开，此时也是直接进入页面。
方法：
1.在路由文件中，给需要登录后才能访问的界面添加一个标识：

{
    path: "/",
    name: "main",
    component: () => import("@/components/Main.vue"),
    meta: {
      requireAuth: true,
    }
}

2.在main.js中添加路由守卫：

router.beforeEach((to, from, next) => {
  //需要权限
  if (to.meta.requireAuth) {
    //判断当前是否拥有权限
    if (store.state.user.access_token) {
      next();
    } else {
      // 无权，跳转登录
      next({
        path: "/login",
        query: { redirect: from.fullPath },
      });
    }
  } else {
    // 不需要权限，直接访问
    next();
  }
});