vue如何限制页面跳转
备注:以下使用的vue的本地缓存是sessionStorage,既临时缓存,关闭页面后,会自动清空。场景一:做登陆界面,只有登录成功了,才能跳转界面,进入主页面。//vue 路由import Router from 'vue-router'Vue.use(Router)new Router({routes: [{//默认页path: '/',redirect: '/login'},{//主页面pa
·
备注:以下使用的vue的本地缓存是sessionStorage,既临时缓存,关闭页面后,会自动清空。
场景一:做登陆界面,只有登录成功了,才能跳转界面,进入主页面。
//vue 路由
import Router from 'vue-router'
Vue.use(Router)
new Router({
routes: [
{//默认页
path: '/',
redirect: '/login'
},
{//主页面
path: '/main',
name: 'MainIndex',
component: MainIndex,
beforeEnter: (to, from, next) => {//在页面跳转前,进行逻辑判断
// token 存在 进入该路由,不存在跳转到登陆页面
if (null != sessionStorage.getItem('token')) {
next();
} else {
next('/Login');
}
},
},
{//登陆界面
path: '/login',
name: 'login',
component: Login,
}
]
})
场景二:登录成功后,发送请求,后端拦截器判断token过期,返回结果到前端,前端跳转到登录页面
//response接收请求结果
axios.interceptors.response.use(res => {
//获取返回结果中的token失效判断结果
const isToken= Number(res.isToken);
if (!isToken) {
this.$message({
message: '登录失效',
type: 'warning'
});
//清空本地缓存
sessionStorage.clear();
//路由跳转至登陆页面
this.$router.push({
name:'login'
});
return
}
return res
}, error => {
NProgress.done()
return Promise.reject(new Error(error))
})
更多推荐
已为社区贡献8条内容
所有评论(0)