当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue如何限制页面跳转

vue如何限制页面跳转

2020年07月23日  | 移动技术网IT编程  | 我要评论

备注：以下使用的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))
})

本文地址：https://blog.csdn.net/BluerCat/article/details/107402600

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网