“This is the 27th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

preface

The logics for logging in, logging out, and obtaining token information of the back-end are completed. Now, the back-end interfaces need to be connected to the overall debugging.

Modify the global request configuration

The global request configuration location is SRC /utils/reqeusts.js, where you can call the interceptor, where all the front-end request responses will be. The interface messages of the back end are all MSG, but message is in this file. It needs to be modified, and the front end cannot display the error if it is not reported by the back end. The default authentication failure status code of vUE -admin-template is 50008,50012. If the status code of the back end is changed, Gin framework will report an error and will say that it does not meet the specification. I will change it to 50X:, and the default MessageBox.

response => { const res = response.data // if the custom code is not 20000, it is judged as an error. if (res.code ! == 200) { Message({ message: res.msg || 'Error', type: 'error', duration: 5 * 1000 }) // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; If (res.code === 401) {// to re-login MessageBox. Confirm (' Login status has expired ', 'login has expired ', {confirmButtonText: CancelButtonText: cancelButtonText, type: 'warning' }).then(() => { store.dispatch('user/resetToken').then(() => { location.reload() }) }) } return Promise.reject(new Error(res.msg || 'Error')) } else { return res } }, error => { Message({ message: error, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } )Copy the code

Intentional login failure:

Intentionally invalidate token Request data interface:

If they finally get intercepted

Login Setting token

After landing all requests need to set the token, file location: SRC/store/modules/user. The js: the token was eventually exist cookies:

const actions = {
  // user login
  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)
        setToken(data)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

Copy the code

Data for the database after successful login:

After each successful token authentication request, the back-end logic adds 7200 seconds, or two hours, to the token expiration time. The first login will generate the token for the account that does not have the token and then return the token to the front-end to save it in the cookie.

All subsequent interface request headers will carry this token:

User information display

Need to display a in the top right corner of the information, it involves the info interface, file location in SRC/store/modules/user. The js interface according to the field to uppercase

// get user info getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response if (! data) { return reject('Verification failed, please Login again.') } const { Name, Avatar } = data commit('SET_NAME', Name) commit('SET_AVATAR', Avatar) resolve(data) }).catch(error => { reject(error) }) }) },Copy the code

conclusion

The front end is mainly for the format of the back end to adjust, modify the field capitalization and status code, and an English debugging information into Chinese, are very simple. Because at the time of the login to security issues, the main logic in the back-end processing, front all the code in front of the user, there are optimized, the authentication code, for example, robots files, verification code password strength, in order to quickly launch did a lot of places is omitted, although simple but still all to the realization of the basic all of the code, Know all the basic details, learned something, the next chapter is ready to improve the background CI script, real online.