Login is a function that is often used in every website. On the page, we input the account password and hit the enter key to log in. But do you know the login principle behind this? Next, we will explain to you how the request is sent after clicking on the login

1. Form validation (login/index.vue)

  1. Utils/validation. js –> validMobile validates your phone number and password. 2) Apply the rule (three configurations) to the template. Set the rules property to the Form. Pass in the validation rule to the Form. The value is set to the name of the field to be verified. 3) Manual pocket validation (to prevent the request from skipping the validation)

2. Call the API encapsulated in API /user.js

1. Find axios instance: utils/request.js and get axios instance 2. 1. Const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url // withCredentials: true, // send cookies when cross-domain requests timeout: 5000 / / request timeout}) 2. # # base API set the base address VUE_APP_BASE_API = 'http://localhost:3000/api' VUE_APP_BASE_API = '/ API 'to ensure that the request and proxy server are identical (see point 5)Copy the code

3. Collect user parameters and pass them to the API in the previous step. (The data item name of the collection page on the page is the same as that in the interface)

4. After the request interceptor, add the request header (add token, utils/request.js)

/ / request interceptor service. Interceptors. Request. Use (config = > {the console. The log (config) / / config is request configuration items, If (token) {config.headers['Authorization'] = '${token}'}}  return config }, error => { // do something with request error console.log(error) // for debug return Promise.reject(error) })Copy the code

5. Proxy forwarding (vue.config.js)

Add a proxy property to devServer //... Env.davelopment => Request set base address =>vue. Config proxy: {/ / with/API if the request is address, will trigger a proxy mechanism / / http://localhost:9588/api/login - > http://localhost:3000/api/login '/ API: {target: 'http://localhost:3000' // The address of the real interface we want to proxy}}Copy the code

6. The back-end needs to start the server and MongoDB, so that the back-end can receive the request and return data 7. Processed by the response interceptor (utils/request.js)

1) Determine whether the current operation is successful. Decide whether axios error (2) to simplify access to effective written data (shell) / / response interceptor service. The interceptors. Response. Use (res = > {the if (res) data) success) {return res.data // unshell} else {return promise.reject (new Error(res.data.message)) // Return Error message, }} error => { // do something with request error console.log(error) // for debug return Promise.reject(error) } )Copy the code

9. Save token to vuex (store/modules/user.js)

With the method of modular state: () = > ({token: setToken () | | null}), mutations: { setToken(state, NewToken) {// vuex state.token = newToken // Persistent setToken(newToken)}} On the front end page // Submit the mutation // 1 after successful login. Save tokens to vuex this.codestore.com MIT ('user/setToken', res.data)Copy the code

10. Token persistence (utils/auth.js)