基于vue2.x实现的即时通讯程序仿微信聊天5对接logo、getInfo接口

• 前言：我们已经开发好了登录注册页面和通讯录页面以及聊天详情页面
• 下面准备接入登录注册和获取用户信息接口
• 先打开接口文档 备用https://www.showdoc.com.cn/2035654172307363/9196984446696982
• 打开项目 的src/permission.js，把白名单内无关的路由删掉，只保留【'/login'】

const whiteList = ['/login'] // no redirect whitelist

• 下面打开src/api/index.js，修改api对象内的【Login】的接口路径和【UserInfo】的接口路径
• 改为我们的接口地址

const api = {
  Login: '/api/login',
  UserInfo: '/api/getInfo',
  UserName: '/user/name'
}

export default api

• 然后打开src/api/user.js，就可以看到我们登录方法和获取用户信息方法就静静等躺在那里，你想用，直接引入用起就是～

image.png

• 下面开始配置反向代理解决跨域
• 打开项目的src/vue.config.js，找到下图中的代码，把注释打开

• 注意 proxy前面 要用 逗号 隔开

image.png

• 修改target为https://yyds.it98k.cn

proxy: {
      //配置跨域
      '/api': {
          target: "https://yyds.it98k.cn",
          // ws:true,
          changOrigin:true,
          pathRewrite:{
              '^/api':'/'
          }
      }
}

• 然后修改环境变量
• 打开src/config/env.development.js，修改baseApi的value值为/api

image.png

• 然后重启项目，才会生效

• 下面
• 打开src/utils/request.js
• 在该文件顶部引入getToken方法

import { getToken,setToken,removeToken } from '@/utils/auth';

• 在该文件中找到if (res.status && res.status !== 200)修改为if (res.code && res.code !== 200)

if (res.code && res.code !== 200) {
      // 登录超时,重新登录
      if (res.code === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
}

• 下面开始接入登录接口

• 打开src/views/login/index.vue
• 找到登录按钮触发的方法handlerLogin
• 在handlerLogin方法里写逻辑

if (this.username.trim() === '') {
        this.$toast.fail('用户名不能为空')
        return
      }
      if (this.password.trim() === '') {
        this.$toast.fail('密码不能为空')
        return
      }
      this.$store.dispatch('login', {username:this.username,password:this.password}).then(() => {
          this.$router.push({ path: '/' })
      }).catch(err => {
          this.$toast.fail(err.message)
      })

• 分析：先进行非空校验，用户名和密码不能为空
• 然后校验通过直接使用dispatch触发vuex内的login方法
• vuex内现在还没有定义login方法，需要去vuex内新建该方法，假设登录成功，直接跳转到首页，假设登录失败，就弹出错误信息，比如账号密码错误
• 下面就去vuex内新建login方法
• 打开src/store/modules/app.js，在actions里新建登录方法

• actions

 // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        commit('SET_TOKEN', response.token)
        setToken(response.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

• 因为用到了登录接口api方法login和获取用户信息接口api方法getUserInfo，和 setToken 方法以及会用到setToken,removeToken，所以要导入需要用到的方法，此外还用到了SET_TOKEN常量方法，要在mutations内新建该方法

import { login,getUserInfo } from "@/api/user"
import { getToken,setToken,removeToken } from "@/utils/auth"

• state

const state = {
  userInfo: '',
  token:getToken()
}

• mutations

const mutations = {
  SET_USER_NAME(state, userInfo) {
    state.userInfo = userInfo
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
}

• getters.js

const getters = {
  userInfo: state => state.app.userInfo,
  token: state => state.app.token,
}
export default getters

• 这时候，输入错误的账号密码登录，会提示错误信息

image.png

• 输入正确的账号密码，会死循环，报错如下

image.png

• 这是因为，登录成功后，触发了permission.js里面的逻辑

image.png

• 而vuex内并没有getUserInfo这个方法，所有一直在死循环报错！
• 下面回到vuex内新建getUserInfo方法

• actions

getUserInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getUserInfo().then(response => {
        const { data } = response
        
        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { username } = data

        commit('SET_USER_NAME', data)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

• 下面修改下permission.js的const hasGetUserInfo = store.getters.userInfo
• 改成如下

const hasGetUserInfo = store.getters.userInfo

• 然后输入正确的账号密码点击登录
• 下面会报错

image.png

• 通过排查发现，getInfo接口确实触发了，但是后端返回401，token失效,并且报错信息提示unknown action type: FedLogOut，找到报错的位置，发现，我们的响应拦截函数拦截到了401状态码，触发了如下的逻辑

// 登录超时,重新登录
      if (res.code === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }

• 该段代码的意思是，捕获到401状态码后，触发了vuex内的FedLogOut方法
• 而vuex内并没有这个方法，所以，要回到vuex内新建FedLogOut方法

• actions

// remove token
  FedLogOut({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      resolve()
    })
  }

• 这时候，输入正确的账号密码登录还是登录不成功，原因是因为我们没有传给后端token，需要修改下如下
• 打开src/utils/request.js的请求拦截器内的config.headers['X-Token'] = ''
• 改成config.headers['token'] = getToken()
• 现在再去输入正确的账号密码登录，就可以

• 【登录成功了】!!!