导航守卫
为了解决在地址栏手动输入 /login
才显示登录界面的问题,可以加入导航守卫进行判断。
如何使用导航守卫?请访问 Vue 官网 模板语法 页面,点击顶部栏的“生态系统”找到 Vue Router,跳转页面后点击“入门”。接着在侧边栏中找到“导航守卫”。
全局前置守卫
可以使用 router.beforeEach
注册一个全局前置守卫:
router.beforeEach((to, from) => {
// 返回 false 以取消导航
return false;
});
// from 代表从哪里来
// to 代表将要跳转到哪个页面
当一个导航触发时,全局前置守卫按照创建顺序调用。
将上述代码复制到 router/index.ts
中配置导航守卫:
// 全局前置守卫
router.beforeEach((to, from) => {
if (to.path === '/main') {
// 判断是否已经登录
let username = sessionStorage.getItem("username");
if (username != null) {
// 已经登录,放行
return true;
} else {
// 未登录,跳转到登录页面
router.push("/login");
return false;
}
}
});
说明
- 路由配置:
- 主界面路由
/main
以及登录页面路由/login
。
- 主界面路由
- 全局前置守卫:
- 使用
router.beforeEach
注册一个全局前置守卫。 - 检查目标路由是否是
/main
,如果是,则判断用户是否已经登录(通过sessionStorage
检查用户名)。 - 如果用户已经登录,放行导航;如果用户未登录,跳转到登录页面。
- 使用
这样,当用户未登录时,任何试图访问 /main
的请求都会被重定向到登录页面,确保用户必须先登录。