一般前后端分离的项目,前端都很少通过mock模拟数据来调用测试,因为后期api出来后,可能还得修改结构,颇为麻烦。本文从实践中总结,完全去掉默认的mock控制。

1.找到vue.config.js文件,去掉mock的加载

devServer: {
    port: port,
    open: true,
    overlay: {
        warnings: false,
        errors: true
    }
    // before: require('./mock/mock-server.js') // 注释掉这一行
}

2.找到main.js,注释掉相关mock

// if (process.env.NODE_ENV === 'production') {
//  const { mockXHR } = require('../mock')
//  mockXHR()
// }

3.login.vue登录页面,直接调用api/user.js下的方法。

先引用login和reg进来,否则用默认的登录接口会再调用用户详情接口

import { login, reg } from '@/api/user'

 把原来的登录方法注释掉,直接调用成功后,把登录token值set到js-cookie里

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          login(this.loginForm).then((res) => {
            if (res && res.code === 0 && res.data && res.data.token) {
              setToken(res.data.token)
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
          // this.$store.dispatch('user/login', this.loginForm)
          //   .then(() => {
          //     this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          //     this.loading = false
          //   })
          //   .catch(() => {
          //     this.loading = false
          //   })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

4.登录后就是菜单的展示问题了,找到/layout/components/Sidebar/index.vue文件,去掉权限控制permission_routes参数,改为:

<sidebar-item v-for="route in getRouterList" :key="route.path" :item="route" :base-path="route.path" />

import routesArr from '@/router/index'
export default {
  components: { SidebarItem, Logo, routesArr },
  computed: {
    getRouterList() {
      return routesArr.options.routes
    },
    ...mapGetters([
      // 'permission_routes', // 注释掉
      'sidebar'
    ]),

OK!完美!

Logo

前往低代码交流专区

更多推荐