前端登录逻辑总结笔记

前端登录逻辑总结笔记

在写后台管理系统的时候，学习了一下vue-element-admin的源码，总结了登录的大致逻辑

前端登录大致结构：

<el-form

  ref="loginForm"

  :rules='loginRules'

></el-form>



loginRules: {

    username: [

        { required: true, trigger: "blur", validator: validateUsername }

    ],

    password: [

        { required: true, trigger: "blur", validator: validatePassword }

    ]

  },

  

  

handleLogin() {

  this.$refs.loginForm.validate(valid => {

    if (valid) {

      this.loading = true

      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

    }

  })

}

前端调用el-form的validate方法对rules进行验证，如果验证通过的话把用户登录信息交给vuex的user/loginaction方法进行登陆验证，登陆验证通过的话会重定向到redirect路由，如果redirect不存在则跳转到首页"/"

将用户登录信息交给vuex后，action方法拿到解构后的username和password，调用api中的login方法，将username和password传入，请求成功后获取response中的token，保存到vuex的state状态中，然后将token保存到Cookie中，如果失败则把err reject掉来处理异常

login({ commit }, userInfo) {

    const { username, password } = userInfo

    return new Promise((resolve, reject) => {

      login({ username: username.trim(), password: password }).then(response => {

        const { data } = response

        commit('SET_TOKEN', data.token)

        setToken(data.token)

        resolve()

      }).catch(error => {

        reject(error)

      })

    })

}

这里的login函数是被封装好的api，request方法是基于axios封装的库，vue-ele-admin是封装为service，这个后面再说

import request from '@/utils/request'



export function login(data) {

  return request({

    url: '后端登录接口',

    method: 'post',

    data

  })

}

axios封装为service库

axios有两种拦截，一种是request拦截(请求拦截器)，一种是response拦截(响应拦截器)

const service = axios.create({

    baseURL: process.env.VUE_APP_BASE_API,

    timeout: 5000

})

// request拦截

service.interceptors.request.use(

    config => {

        if(store.getters.token) {

            // 定制headers

            config.headers['X-Token'] = getToken()

        }

        return config

    },

    error => {

        // 异常处理

        console.log(error)

        return Promise.reject(error)

    }

)

 //response拦截

service.interceptors.response.use(

response => {

  const res = response.data

  if (res.code !== 20000) {

    //如果状态码返回是错的  那这里会进行进一步判断并处理

   

    if (res.code === 50008 || res.code === 50012 || res.code === 50014) {

      // 50008: Illegal token;

      //50012: Other clients logged in;

      //50014: Token expired;

      // 弹出Message

      // to re-login

      }).then(() => {

        store.dispatch('user/resetToken').then(() => {

         // 如果token失效则刷新token，并

         //刷新页面

        location.reload()

        })

      })

}

    return Promise.reject(new Error(res.message || 'Error'))

  } else {

    return res

  }

},

  error => {

      return Promise.reject(error)

  }

)

首先创建axios示例，它帮助我们完成一些基本的请求功能，更重要的是它的两个拦截器：请求拦截器和响应拦截器，设置请求拦截器的好处是可以在这里添加全局统一的关卡 比如说token，判断是否拥有登录，有则添加到请求参数中去，这样只要请求就会带token，就不需要再在每个接口中写全局统一的参数。

config参数如下:

设置响应拦截器的好处是拦截响应，根据返回的状态码做不同的处理，不同的状态码有不同的意思，这里需要根据接口请求返回的状态码做不同的处理

最后总结一下流程：前端验证登录信息后将用户登录信息交给vuex的action方法，vuex拿到用户信息后调用登录api，成功后将用户token保存到state状态并保存到Cookie中，整个前端的登录逻辑大致就是这样了。虽然整个流程比较简单，但是非常实用！！而且适用面非常广，我在写项目用到登录的话基本上都是这么写的，所以了解上面写的整个前端登录的逻辑应该可以对自己的开发有一点帮助