路由访问权限逻辑
- 有的页面无需用户登录即可查看，如登录页、注册页、找回密码页、主页、对外公开的其他页面等。
- 有的页面需要用户登录后才能查看，如用户中心、博客编辑页等。
核心技术
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), },
添加全局路由守卫
import store from "@/store";
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;
- 通过路由meta元数据中的 requiresAuth 字段来判断该路由的访问是否需要用户登录。
- 通过 vuex 中的 isLogin 字段来判断用户是否登录。
用户登录成功后，需执行的逻辑：
this.$store.commit("set_isLogin", true);
相关的 vuex 代码
src\store\index.js
- state 中
isLogin: false,
- mutations 中
set_isLogin(state, value) { state.isLogin = value; },
