导航守卫:直白的说,导航守卫就是路由跳转过程中的一些钩子函数,这些函数能让你在跳转过程中操作一些其他 的事的时机,这就是导航守卫。
比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面 让其登录。此时可以使用路由导航来实现。
导航守卫有三种:全局的, 单个路由独享的, 组件级的.
没有登录时,输入路径进入页面会直接跳转到登录页。
在登录页存值,存登录的个人信息,账号,密码,姓名等信息,用来判断,用户是否已经登录。
// 存个人信息sessionStorage.setItem("name", res.data.nickname);sessionStorage.setItem("phone", res.data.tel);sessionStorage.setItem("pass", res.data.pass);
在src里面新建文件夹router,router中新建文件index.js
在index.js 写导航守卫。
router.beforeEach((to, from) => {const change=sessionStorage.getItem('phone')// 如果目标路由需要登录且用户没有登录if (!change && to.path!='/') {// 使用 replace 防止登录页进入历史记录return '/'} else {// 如果不需要登录或者用户已经登录,正常访问return true}});