vue实战——路由访问权限【详解】

路由访问权限逻辑

• 有的页面无需用户登录即可查看，如登录页、注册页、找回密码页、主页、对外公开的其他页面等。
• 有的页面需要用户登录后才能查看，如用户中心、博客编辑页等。

核心技术

Vue Router 路由守卫
https://blog.csdn.net/weixin_41192489/article/details/117409477

代码范例

src\router\index.js
在需要登录才能访问的路由上添加路由meta元数据，以用户中心为例：

  // 用户中心
  {
    path: "/userCenter",
    meta: { requiresAuth: true },
    component: (resolve) => require(["@/views/userCenter/index.vue"], resolve),
  },
1
2
3
4
5
6

添加全局路由守卫

import store from "@/store";
1

const router = new VueRouter({
  routes,
});

// 全局路由守卫
router.beforeEach((to, from, next) => {
  // 需鉴权的路由—— 判断路由的meta元数据中，是否requiresAuth为true
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    // 判断用户是否已登录
    if (store.state.isLogin) {
      // 已登录，则跳转到目标路由（需要用户登录的页面）
      next();
    } else {
      // 未登录，跳转到登录页
      next("/login");
    }
  } else {
    // 公共页面，直接跳转到目标路由
    next();
  }
});

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 通过路由meta元数据中的 requiresAuth 字段来判断该路由的访问是否需要用户登录。
• 通过 vuex 中的 isLogin 字段来判断用户是否登录。

用户登录成功后，需执行的逻辑：

this.$store.commit("set_isLogin", true);
1

相关的 vuex 代码
src\store\index.js

• state 中

isLogin: false,
1

• mutations 中

set_isLogin(state, value) {
  state.isLogin = value;
},
1
2
3