Web前端(11)-vue刷新网页404、登录状态页面路由处理

天才首富科学家2025-04-22 16:55

问题

一、登录状态路由处理

我的网页有两个页面，默认进入网站后的首页我指向了LoginView登录组件。

另一个是需要登录后才能看到的homepage页面。

现在遇到了两个问题：

1、没有登录直接将域名添加/homepage也能看到这个页面

2、已经登陆后访问网站默认域名没有跳转到/homepage，而是去到了默认的首页指向的LoginView登录页。

这明显不符合使用习惯。

二、刷新homepage页面404错误

用户已经登陆会跳转到homepage页面，但是刷新就报404，这是不正常的，正常应该是继续展示homepage页面即可。

解决方案

一、登录状态路由处理

未登陆状态如果用户想进入除了首页默认登录页以外的其他路由页面，都应该跳转回登录页面。

如果已经登陆，用户访问默认域名，则应该跳转到homepage登录后首页。

js 复制代码

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  const token = localStorage.getItem('token')
  const isLogined = token && token.trim() !== ''
  console.log("isLogined = ", isLogined + " to.path = " + to.path)
  // 统一处理路由
  if (to.path === '/' && isLogined) {
    // 如果用户已登录且访问登录页面，直接跳转到首页
    next('/homepage');
  } else if (to.path !== '/' && !isLogined) {
    // 如果没有登录就进入二级页面，都跳转到首页
    next('/')
  } else {
    next()
  }
});

二、刷新404

因为默认路由配置是使用的History模式，这种模式下每次刷新都会向服务器发送请求，服务器没有正确处理就会报404。

而hash模式会在页面路由前加上/#/，并且刷新不会向服务器发送请求，所以就不会404，所以route下的index.js改成hash模式即可。

js 复制代码

const router = createRouter({
  // history: createWebHistory(),// homepage页面刷新会404，因为history模式会向服务器发送请求，服务器没有正确处理就会报404
  history: createWebHashHistory(),
  routes
});