微服務項目：尚融寶（29）（後端搭建：實作使用者登入（2））

認清現實，放棄幻想，準備鬥争

二、前端整合

1、登入腳本

pages/login.vue

methods: {
    //登入
    login() {
      this.$axios
        .$post('/api/core/userInfo/login', this.userInfo)
        .then((response) => {
          // 把使用者資訊存在cookie中
          cookie.set('userInfo', response.data.userInfo)
          window.location.href = '/user'
        })
    },
},      

2、頁面頭資訊

components/AppHeader.vue

腳本

<script>
import cookie from 'js-cookie'

export default {
  data() {
    return {
      userInfo: null,
    }
  },

  mounted() {
    this.showInfo()
  },

  methods: {
    //顯示使用者資訊  
    showInfo() {
      // debugger
      let userInfo = cookie.get('userInfo')
      if (!userInfo) {
        console.log('cookie不存在')
        this.userInfo = null
        return
      }  
      userInfo = JSON.parse(userInfo)  
      this.userInfo = userInfo
    },

    //退出  
    logout() {
      cookie.set('userInfo', '')
      //跳轉頁面
      window.location.href = '/login'
    },
  },
}
</script>      

一、後端的接口

1、添加令牌校驗接口

service-core 中 UserInfoController添加令牌校驗接口

@ApiOperation("校驗令牌")
@GetMapping("/checkToken")
public R checkToken(HttpServletRequest request) {

    String token = request.getHeader("token");
    boolean result = JwtUtils.checkToken(token);

    if(result){
        return R.ok();
    }else{
        //LOGIN_AUTH_ERROR(-211, "未登入"),
        return R.setResult(ResponseEnum.LOGIN_AUTH_ERROR);
    }
}      

2、Swagger請求頭添加header

step1：service-base添加依賴

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>swagger-bootstrap-ui</artifactId>
    <version>1.9.2</version>
</dependency>      

step2：通路

​​http://localhost:8110/doc.html​​

step3：添加全局參數

二、前端整合

1、優化showInfo

components/AppHeader.vue

腳本

showInfo() {
    // debugger
    let userInfo = cookie.get('userInfo')

    if (!userInfo) {
        console.log('cookie不存在')
        this.userInfo = null
        return
    }

    userInfo = JSON.parse(userInfo)
    
    //先在伺服器端校驗token
    this.$axios({
        url: '/api/core/userInfo/checkToken',
        method: 'get',
        headers: {
            //如果token校驗成功，再展示user資訊
            token: userInfo.token,
        },
    }).then((response) => {
        console.log('校驗成功')
        this.userInfo = userInfo
    })
},      

2、axios請求攔截（了解）

可以在axios請求攔截器中統一添加header

$axios.onRequest((config) => {
    // 添加請求頭：token
    let userInfo = cookie.get('userInfo')
    if (userInfo) {
      console.log('添加header')
      userInfo = JSON.parse(userInfo)
      config.headers['token'] = userInfo.token
    }
    console.log('Making request to ' + config.url)
  })      

3、axios響應攔截（了解）

$axios.onResponse((response) => {
    console.log('Reciving resposne', response)
    if (response.data.code === 0) {
      return response
    } else if (response.data.code === -211) {
      console.log('token校驗失敗')
      cookie.set('userInfo', '')
      //debugger
      //跳轉到登入頁面
      window.location.href = '/login'
    } else {
      Message({
        message: response.data.message,
        type: 'error',
        duration: 5 * 1000,
      })
      return Promise.reject(response)
    }
  })      

 今日bug

dictList(id){
     return request ({
       // 與後端的接口，調用的是後端的controller
       url: `/admin/cmn/dict/findChildData/${id}`,
       method: 'get',
     })
   },