Vue 的 mixin 可以在多个组件中复用某些逻辑

下面是一个使用 Vue 的 mixin 实现一个简单的登录验证功能的示例代码：

// 定义 mixin 对象
export default {
  created () {
    // 判断用户是否已登录
    const isAuthenticated = localStorage.getItem('isAuthenticated')
    if (!isAuthenticated && this.$route.path !== '/login') {
      // 如果用户未登录，则跳转到登录页
      this.$router.push('/login')
    }
  }
}

在上述代码中，我们定义了一个 mixin 对象，它会在每个组件的创建时检查用户是否已登录。具体来说，我们使用 localStorage 来存储用户登录状态，如果用户未登录且当前路由不是登录页，则自动跳转到登录页。

import authMixin from '@/mixins/authMixin'

export default {
  name: 'MyComponent',
  mixins: [authMixin],
  // ...
}

在上述代码中，我们通过 mixins 选项将 authMixin 对象引入到组件中。这样，在组件被创建时，authMixin 中定义的逻辑就会被执行，从而实现了登录验证功能。

注意，我们还需要在登录页中清除 localStorage 中的用户登录状态，以便用户重新登录。此外，上述示例中只是一个简单的示例，实际应用中可能需要更复杂的验证逻辑。