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

前往低代码交流专区

更多推荐