Vue2实现未登录拦截页面功能的基本步骤和示例代码

npm install vue-router

import VueRouter from 'vue-router'
 
Vue.use(VueRouter)

export default {
  isAuthenticated() {
    // 这里应该根据你的应用逻辑来检查用户是否登录
    // 例如，检查本地存储（localStorage）中是否有token
    return localStorage.getItem('userToken') !== null;
  },
 
  redirectIfNotAuthenticated(to, from, next) {
    if (!this.isAuthenticated()) {
      to.path !== '/login' && to.matched.some(record => record.meta.requiresAuth) ? next({ path: '/login' }) : next()
    } else {
      next()
    }
  }
}

// ...其他代码
const routes = [
  { path: '/login', 
    component: Login 
  },
  { path: '/dashboard', 
    component: Dashboard,
    meta: 
       {requiresAuth: true} 
   } // 标记需要验证的路由
]
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
 
router.beforeEach((to, from, next) => {
  const auth = require('@/router/auth').default // 引入认证守卫
  auth.redirectIfNotAuthenticated(to, from, next)
})
 
// ...其他代码

// Login.vue
 
export default {
  methods: {
    login() {
      // ...登录逻辑
      // 假设登录成功后，服务器返回了一个token
      const token = 'your-token-from-server'
      localStorage.setItem('userToken', token)
      // 重定向到主页或其他需要认证的路由
      this.$router.push('/dashboard')
    }
  }
}

methods: {
  // ...其他方法
  logout() {
    localStorage.removeItem('userToken')
    this.$router.push('/login')
  }
}