第一步:添加需要拦截的页面
{ path: '/control', name: 'Control', meta: { requireAuth: true },
第二步:页面拦截
router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (!(Object.keys(store.state.userInfo).length === 0)) { // 通过vuex state获取当前的token是否存在 iView.LoadingBar.start() next() } else { next({ path: '/login', query: { redirect: to.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由 }) } } else { iView.LoadingBar.start() next() } })
第三步:后台返回拦截
if (res.data.code !== 0) { Message.info(res.data.msg) } if (res.data.code === 401) { router.replace({ path: 'login', query: { redirect: router.currentRoute.path } }) Message.info('已掉线,请重新登录') }
拦截全部做完,祝你好运!!!
{
path: '/control',
name: 'Control',
meta: {
requireAuth: true
},