Vue3 Pinia登录报错：无法设置isAuthenticated属性的问题

可能原因1：State中isAuthenticated被定义为只读属性 #

如果在Pinia Store的state定义里，isAuthenticated被标记为readonly（无论是对象字面量里的readonly，还是通过Object.defineProperty设置为不可写），Pinia的响应式代理会阻止对该属性的修改，触发'set' on proxy错误。

比如错误的state定义：

state: () => ({
  readonly isAuthenticated: false, // 此处的readonly会导致属性不可写
  username: '',
  email: ''
})

或者通过TypeScript接口错误标记为readonly：

interface AuthState {
  readonly isAuthenticated: boolean; // 编译时readonly，若配合工具可能转为运行时不可写
  username: string;
  email: string;
}

解决方法 #

移除isAuthenticated的readonly标记，确保state属性为可写：

// 修正后的state定义
state: () => ({
  isAuthenticated: false,
  username: '',
  email: '',
  decodedToken: null
})

// 修正后的TypeScript接口
interface AuthState {
  isAuthenticated: boolean;
  username: string;
  email: string;
  decodedToken: any;
}

可能原因2：Actions中修改isAuthenticated的方式错误 #

如果在actions里修改isAuthenticated时，使用了会冻结state的操作（比如Object.freeze），或者错误替换整个state对象导致属性丢失可写性，也会触发该错误。

比如错误的action写法：

actions: {
  loginSuccess(decodedToken) {
    const newState = Object.freeze({
      ...this.$state,
      isAuthenticated: true,
      username: decodedToken.username,
      email: decodedToken.email
    });
    this.$state = newState; // 冻结后的对象属性不可写，导致修改失败
  }
}

解决方法 #

直接通过this访问并修改单个属性，避免冻结state对象：

actions: {
  loginSuccess(decodedToken) {
    this.isAuthenticated = true;
    this.username = decodedToken.username;
    this.email = decodedToken.email;
    this.decodedToken = decodedToken;
  }
}

可能原因3：自定义代理拦截导致的错误 #

如果在Pinia实例配置中添加了自定义的Proxy拦截器，且拦截set操作时返回了false或其他假值，也会触发该错误。

比如错误的拦截器配置：

const pinia = createPinia();
pinia.use(({ store }) => {
  store.$state = new Proxy(store.$state, {
    set(target, key, value) {
      if (key === 'isAuthenticated') {
        return false; // 错误返回假值，阻止属性修改
      }
      return Reflect.set(target, key, value);
    }
  });
});

解决方法 #

检查自定义Proxy拦截器的逻辑，确保set操作对isAuthenticated返回true：

pinia.use(({ store }) => {
  store.$state = new Proxy(store.$state, {
    set(target, key, value) {
      // 移除针对isAuthenticated的错误拦截，或确保返回true
      return Reflect.set(target, key, value);
    }
  });
});

快速排查步骤 #

1. 执行console.log(Object.getOwnPropertyDescriptor(store.$state, 'isAuthenticated'))，查看该属性的writable是否为true。
2. 检查Login.vue中是否直接修改store.isAuthenticated，若有则改为调用store的actions。
3. 确认auth.ts中没有对isAuthenticated做任何不可写的配置。

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