不使用vue-auth的login函数，如何保留其其他授权功能？

没问题，你完全可以自己实现登录逻辑，同时保留vue-auth提供的$auth.check()、路由权限、$auth.user这些便捷功能。核心思路是在自定义登录成功后，手动更新vue-auth的内部状态，让它以为是自己完成的登录流程就行。下面是具体的步骤和代码修改建议：

1. 登录成功后手动同步vue-auth状态 #

在你自定义的登录流程拿到token和用户信息后，需要调用vue-auth提供的API来更新它的内部状态，这样$auth.check()、路由守卫这些功能才能正常工作。

修改Login.vue的登录回调 #

在你的login()方法的then回调里，添加vue-auth的状态更新逻辑：

login () {
  var self = this;
  _AuthenticationService
    .login(this.data.body)
    .then(response => {
      self.info = response;
      const token = response.data.token; // 从你的接口响应里拿token
      
      // 1. 设置token到vue-auth
      self.$auth.setToken(token, self.data.rememberMe); 
      // 第二个参数对应rememberMe，决定token存在localStorage还是sessionStorage
      
      // 2. 如果需要设置用户信息，调用setUser
      // 如果你的登录接口返回用户信息，直接传；如果需要单独请求，这里可以加axios请求后再调用
      // self.$auth.setUser(response.data.user);
      
      // 3. 触发vue-auth的ready状态，确保所有依赖$auth.ready的逻辑正常
      self.$auth.ready();
      
      // 4. 手动处理跳转（原来vue-auth的redirect逻辑）
      const redirect = self.$auth.redirect();
      self.$router.push({ name: redirect ? redirect.from.name : 'Home' });
      
      console.log('Auth Success');
    })
    .catch(err => {
      self.info = err;
      console.log(err);
    });
}

简化AuthenticationService的登录方法 #

因为状态更新的逻辑移到了Login.vue（组件里直接调用$auth更方便），service只需要负责请求接口返回数据即可：

import axios from 'axios';
import axiosconfigurator from '../axiosconfigurator'

class AuthenticationService {
  login (request) {
    // 替换成你实际的登录接口地址
    return axios.post('http://localhost:6789/login', request)
      .then(response => response.data)
      .catch(error => {
        console.log(error);
        throw error; // 抛出错误让组件处理
      });
  }
}

2. 确保路由权限控制继续生效 #

你原来的路由配置不需要修改，只要vue-auth的router驱动配置正确，并且$auth.check()能正确返回登录状态，路由守卫就会正常工作。

检查你的app.js里的vue-auth配置，确保router驱动已经正确引入：

Vue.use(VueAuth, {
  auth: {
    request: function (req, token) {
      this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
    },
    response: function (res) {
      return res.data.token; // 保持原来的逻辑，确保vue-auth能从响应里提取token
    }
  },
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  loginData: {
    url: '', // 不用vue-auth的login，这里留空
    fetchUser: false // 自己处理用户信息，设为false
  },
  refreshData: {
    enabled: false
  },
  // 可选：指定token存储方式，和setToken时的rememberMe对应
  tokenDefaultName: 'auth_token',
  storageType: 'localStorage' // 或者'sessionStorage'
})

3. 处理页面刷新后的状态恢复 #

当页面刷新时，vue-auth会自动从存储里读取token，但如果需要恢复用户信息，需要在app初始化时手动触发：

在app.js里添加：

// 页面加载时，检查是否有token，有则恢复用户信息（如果需要的话）
if (Vue.prototype.$auth.token()) {
  // 这里可以调用你的接口获取当前用户信息，然后设置给vue-auth
  // axios.get('/api/user')
  //   .then(res => Vue.prototype.$auth.setUser(res.data))
  //   .finally(() => Vue.prototype.$auth.ready());
  
  // 如果不需要用户信息，直接触发ready即可
  Vue.prototype.$auth.ready();
}

4. 登出功能适配 #

原来的登出逻辑可以保留，或者也可以自定义：

logout () {
  this.$auth.logout({
    redirect: { name: 'Login' }
  });
  // 或者自定义登出：
  // this.$auth.removeToken();
  // this.$auth.setUser(null);
  // this.$router.push({ name: 'Login' });
}

这样修改后，你既用了自己的登录逻辑，又能继续享受vue-auth提供的路由权限、$auth.check()、$auth.user、$auth.ready()这些功能啦！

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