023 登录页-登陆成功后的路由导航守卫

1、登入之后跳转页面，这样写

把这里名字改成如图所示的名字

 这样就实现了点击登录时候跳转页面的功能了。

 

这里还需要做一个判断，判断用户是否登录？登录：main。未登录：login。

 新建文件

 把这里的这句话放到新建的文件里（把这个常量定义到这里来）

 这样写

 然后这个页面引入

 这个页面这样写

 自动引入　　

这段代码是在 Vue Router 的 beforeEach 全局前置守卫钩子函数中，主要用于实现登录状态检查和页面访问控制：

1. 获取 token：
   const token = localCache.getCache(LOGIN_TOKEN) 这行代码的作用是从 localCache 对象中获取名为 LOGIN_TOKEN 的缓存值。localCache 应该是一个自定义的用于管理本地缓存（如 localStorage 或 sessionStorage）的对象，getCache 方法负责从缓存中读取指定键的值。在大多数应用中，LOGIN_TOKEN 是用户登录成功后由服务器返回并存储在本地的身份验证令牌，用于后续请求中验证用户身份。
2. 条件判断：
   if (to.path == '/main' &&!token) 这是一个条件判断语句。
   • to.path == '/main'：to 是 beforeEach 钩子函数的参数，代表即将要进入的目标路由对象，to.path 获取目标路由的路径。这里判断目标路由的路径是否为 /main。
   • &&!token：&& 是逻辑与运算符，!token 表示 token 不存在（token 为 null、undefined 或空字符串等假值情况）。这个条件整体的意思是当目标路由是 /main 页面且当前没有有效的 token（即用户未登录）时，执行后续代码块。
3. 重定向处理：
   if (!token) return '/login' 这又是一个条件判断，不过这里存在一些逻辑冗余，因为外层已经判断了 !token 的情况。在 beforeEach 钩子函数中，正确的重定向方式不是直接 return 一个路径，而是应该使用 next 函数来控制导航流程。next 函数是 beforeEach 钩子函数的重要参数，它用于决定是否继续导航、重定向到其他页面或中断导航。所以这里正确的写法应该是 next('/login')，这样当用户未登录且试图访问 /main 页面时，会将用户重定向到 /login 页面，以确保只有登录用户才能访问 /main 页面。

　　这段代码的目的是在路由导航到 /main 页面之前，检查用户的登录状态（通过 token），如果用户未登录，则将用户重定向到登录页面，但需要修正重定向的实现方式。