话不多说,直接上代码:
router.beforeEach((to, from, next) => { let userName = localStorage.getItem('userName') if (to.name !== 'Login' && from.name !== 'Login') { if (userName === null) { return next({ path: '/' }) } console.info('拦截跳转') } if (from.name === 'Login') { if (userName === null) { return next({ path: '/' }) } console.info('userName') console.info(userName) console.info('拦截跳转') }
next() })
1、代码在全局路由表中注册beforeEach方法,在路由发生跳转前实现拦截
2、登录后将用户信息保存在localStorage中,通过校验用户名判断是否登录态(正统需请求后台)
3、源及目标路由涉及登录页,不拦截
4、其余跳转实行拦截,失去登录态,跳转至登录页