这篇文章主要介绍“Vue中的全局导航守卫实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中的全局导航守卫实例分析”文章能帮助大家解决问题。
在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录,前端可以判断,后端也会进行判断的,我们前端最好也进行判断。
vue-router 提供了导航钩子:全局前置导航钩子 beforeEach 和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在 beforeEach 导航钩子中进行判断。
1、to:即将要进入的目标路由对象;
2、from:当前导航即将要离开的路由对象;
3、next :调用该方法后,才能进入下一个钩子函数(afterEach)。
next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由
实现用户验证的代码:
router.beforeEach((to, from, next) => {
//我在这里模仿了一个获取用户信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用户信息存在则往下执行。
next()
} else {
//如果用户token不存在则跳转到login页面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})
和 beforeEach 不同的是 afterEach 不接收第三个参数 next 函数,也不会改变导航本身,一般 beforeEach 用的最多,afterEach 用的少
router.afterEach((to,from)=>{ //这里不接收next
console.log(to);
console.log(from);
})
应用场景: 登录页面防止用户页面直接在地址栏中可以访问其他页面;
背景: 在 地址栏当中输入地址可以访问其他页面;然而我们需要一个系统当中来进行拦截;
那就是全局导航守卫来进行拦截, 用vue-Router 实例的方法来实现的;
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home}
]
})
//全局路由前置守卫 --路由拦截
router.beforeEach((to, from, next) => {
// to 将要前往的路由
//from 从哪个路由过来的
//next(path) 是一个函数 表示继续执行下一步,强制执行前往的path 路由
//如果前往login 页面 则不需要token 直接进入就可以
if (to.path === "/login") return next();
//获取token
const TOKEN = window.sessionStorage.getItem("TOKEN");
if (!TOKEN) {
//token 不存在 name 意味着 没有进行登录 返回登录页面
next({ path: "/login" });
}
//已经 存在TOKEN name 就可以进行
next();
});
关于“Vue中的全局导航守卫实例分析”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。