vue 判断是否登录，未登录跳转到登录页

绝地灬酷狼 2023-06-04 14:59 32阅读 0赞

网页一进入判断是否登录，未登录跳转到登录页面

## router.js ##

export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld,
          meta: {
            title: '首页',
            requiresAuth: true // 是否需要判断是否登录
          }
        },
        {
          path: '/login',
          name: 'login',
          component: login,
          meta: {
            title: 'login'
          }
        }
      ]
    })

## main.js ##

router.beforeEach((to, from, next) => {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      // 判断该路由是否需要登录权限
      if (to.matched.some(record => record.meta.requiresAuth)) {
        if (to.name === 'login') {
          next()
        } else if (localStorage.getItem('token')) {
          // 访问服务器缓存数据，判断当前token是否失效
          Vue.http.get("http:xxxx/Login/UserIsLogin?token=" localStorage.getItem('token') "&url=" to.name,{withCredentials: true}).then(response => response.json()).then(num => {
                // console.log('是否登录',num);
                if(num.code==1001){
                 next();
                } else{
                 alert('您的token已超时，请重新登录');
                 next('/Login');
              }
           })
        } else {
          next('/Login')
        }
      } else {
        next()
      }
    })

更多专业前端知识，请上 **【猿2048】www.mk2048.com**