VueJS中Mixins无法生效：组件无法调用混入方法问题

首先，咱们先拆解你遇到的两个问题：一个是this.isLogged() is not a function的报错，另一个是你代码里隐藏的logout方法的潜在问题。

一、为什么isLogged()找不到？ #

最可能的原因是全局混入没有成功生效，导致组件的methods里没有挂载这个方法。常见的诱因有这几个：

1. 导入路径错误
   检查main.js里import AuthHelper from './utils/AuthHelper'的路径是否准确：

   • 注意文件名大小写（Linux/macOS系统对大小写敏感，比如实际文件是authHelper.js但你写了AuthHelper）
   • 路径层级是否正确（比如是不是应该写成../utils/AuthHelper？）
     如果路径错了，导入的是一个空对象，全局混入自然不会生效，组件里也就找不到isLogged方法。

2. 混入时机问题
   虽然你现在的代码里Vue.mixin(AuthHelper)写在new Vue之前，但如果有其他全局配置（比如第三方插件）干扰了Vue的全局混入逻辑，可以尝试把Vue.mixin(AuthHelper)移到所有Vue.use之后、new Vue之前的最后位置，确保它的优先级：

   Vue.use(BootstrapVue)
   Vue.use(VueSession)
   // 把混入放在最后
   Vue.mixin(AuthHelper)
   
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   })
   

3. 快速验证方法
   在组件的created钩子中打印this，查看methods属性里是否包含isLogged：

   created () {
     console.log(this) // 打开浏览器控制台，检查methods里的内容
     this.isLogged()
   }
   

   如果确实没有，说明全局混入没生效，可以先改用局部混入测试：

   import AuthHelper from '../utils/AuthHelper' // 路径根据实际情况调整
   export default {
     name: 'Profil',
     mixins: [AuthHelper], // 局部引入mixin
     data () {
       return {
         user: this.$session.get('user'),
         oldpass: '',
         newpass: '',
         newpassrepeat: '',
         error: [],
         error2: []
       }
     },
     created () {
       this.isLogged()
     }
   }
   

   如果局部混入能正常调用isLogged，就说明全局混入的配置环节出了问题，再回头排查main.js里的全局配置逻辑。

二、隐藏的logout方法问题 #

你的AuthHelper里logout用了箭头函数，这会导致this不绑定到Vue实例，而是继承自定义时的上下文（比如浏览器的window）。当你调用logout时，this.$session会直接报错，因为window没有$session属性。赶紧改成普通函数：

export default {
  methods: {
    isLogged () {
      if (!this.$session.exists()) {
        this.$router.push({ name: 'Login' })
      }
    },
    // 把箭头函数改成普通函数
    logout() {
      this.$session.destroy()
      this.$router.push({ name: 'Login' })
    }
  }
}

内容的提问来源于stack exchange，提问作者na5tyk