vue登录业务流程

不管是什么项目，登录必不可少，下面介绍具体技术栈：vue+vue-router+vuex+elementui+本地存储

1.第一步还是我们应该准备的结构和样式。这边我们采用elementu快速搭建，并绑定表单数据。

2.第二步准备二次封装接口。

1）新建一个request文件，封装基础路径(基础路径一般后端会设置一个api，我们把api设置为基础路径，使用脚手架代理请求解决跨域问题)

import axios from 'axios'

const request = axios.create({
  baseURL: '/api’,
  timeout: 20000
})

export default request

2）vue.config.js设置代理

// 配置代理
    proxy: {
      '/api': {
        target: '你要请求的服务器路径',
        changeOrigin: true
      }
    }

3）封装api，并把api导出

export const loginApi = (data) => request.post('/sys/login', data)

3.在request文件封装请求响应拦截器。（在请求拦截器中，统一添加token，响应拦截器中对token过期做处理）token在下一步vuex中存入

request.interceptors.request.use(
  config => {
    // 统一添加token
    const token = store.getters.token
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

request.interceptors.response.use(
  response => {
    // 设置响应判断
    const { data } = response
    // 为true登录成功
    if (data.success) return response
    else {
      // 否则失败
      return Promise.reject(new Error(data.message))
    }
  },
  error => {
    // 401token过期处理
    console.dir(error)
    if (error?.response?.data?.code === 10002) {
      store.commit('user/removeTokenMutations')
      store.commit('user/RESET_STATE')
      router.replace('/login')
    }
    return Promise.reject(error)
  }
)

export default request

4装本地存储，使token持久化

// 处理cookies的工具
import Cookies from 'js-cookie'

const TokenKey = '名字'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
  // return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

5uex的store中新建user模块，导入本地存储，在user的state中对数据初始化，mutations中数据处理。

import { getToken, setToken, removeToken } from '@/utils/auth'
const getDefaultState = () => {
  return {
    token: getToken(),//先从本地取token
    userInfo: {}
  }
}
const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  // 设置token
  setTokenMutations(state, tokenVal) {
    state.token = tokenVal
    setToken(tokenVal)
    // console.log(tokenVal)
  },
  // 移除token
  removeTokenMutations() {
    state.token = ''
    removeToken()
  },

6.下面就可以请求了。在store的user模块的actions中请求接口

import { loginApi} from '@/api' //导入接口
const actions = {
  // 登录
  async loginApiActions({ commit }, loginForm) {
    try {
      const { data } = await loginApi(loginForm) //loginForm是账号密码
      // 成功信息
      Message.success(data.message)
      // 存token
      commit('setTokenMutations', data.data)
    } catch (error) {
      // 错误信息
      Message.error(error.message)
    }
  },
}

7.登录组件中调用actions方法，实现登录

handleLogin() {
      this.$refs.loginForm.validate(async(valid) => { // 登录校验
        if (valid) {
          // 通过校验，调用action的的登录
          await this.$store.dispatch('user/loginApiActions', this.loginForm)
          // 跳转首页
          this.$router.replace('/')
        } else {
          return false // 未通过
        }
      })
    }

8.在router中，设置路由守卫，判断有无token，有token才能进入主页，反则强行登录页

router.beforeEach(async(to, from, next) => {
  // 获取token
  const token = store.getters.token
  // 判断有无token
  if (token) {
    // 是否是去登录页
    if (to.path === '/login') {
      // 强制首页
      next('/')
    } else {
      next()
    }
    // 没有token
  } else {
    if (whiteList.includes(to.path)) next()
    // 通行
    else {
      // 强制登录
      next('/login')
    }
  }
})

这里的token我使用了vuex+本地存储，我们也可以只使用本地存储，但是速度较慢。