nuxt 시리즈 [2] 사용자 로그 인하 여 사용자 정보 와 token 을 저장 하고 권한 인증 을 실현 합 니 다.

Nuxt. js 는 Vue. js 의 서버 렌 더 링 프레임 워 크 를 기반 으로 SEO 문 제 를 완벽 하 게 해결 할 수 있 으 나 권한 인증 이 큰 통 증 이 되 었 습 니 다. 사용자 가 로그 인 한 후 token 을 저장 하여 후속 권한 문 제 를 검증 해 야 합 니 다.
해결 방법: js - cookie 를 이용 하여 token 을 저장 하면 token 에서 머리 에서 얻 을 수 있 고 vuex 를 사용 하여 token 과 사용자 정 보 를 store 에 저장 할 수 있 습 니 다.
1. 로그 인 작업

      const Cookie = process.client ? require('js-cookie') : undefined

       //   token
      getToken() {
        let vm = this
        //    axios       
        User.userLogin.request(this.form, (res) => {
          let token = res.data['token']
          vm.$store.commit('setAuth', token)
          Cookie.set('auth', token)
          vm.getUserInfo()
        }, (error) => {
            vm.$notify.error({title: '            ！'})
        })
      },
        //       
      getUserInfo() {
        let vm = this
        User.userInfo.request((res) => {
          let data = res.data
          if (data) {
            vm.$store.commit('setUser', data)
            vm.$router.push('/reading-list')
          }
        })
      },

 
2. 미들웨어 authenticated. js
store 안의 데 이 터 를 새로 고침 한 후 비 웠 기 때문에 미들웨어 를 추가 하여 store 데 이 터 를 다시 설정 합 니 다.머리 에 사용자 정보 가 없 으 면 쿠키 가 효력 을 잃 으 면 다시 로그 인 합 니 다.

import getCookie from '@/config/get-cookie'

export default function ({store, route, redirect, req}) {
  // If the user is not authenticated
  const {auth} = getCookie(req)
  if (auth) {
    store.commit('setAuth', auth)
    return store.dispatch('getUserInfo')
  }
  const routePath = route.path
  const extraPath = ['/']
  if ((!store.state.auth) && extraPath.indexOf(routePath) === -1) {
    //        
    return redirect('/')
  }
}

nuxt. config. js 에서 미들웨어 사용 하기

  router: {
    middleware: ['authenticated'],
  }

3.store/index.js

  nuxtServerInit  

    nuxtServerInit({commit, state}, {req}) {
        //console.log('nuxt init')
       // console.log(req.headers.cookie)
        let auth = null
        if (req.headers.cookie) {

          const parsed = cookieparser.parse(req.headers.cookie)
          try {
            auth = JSON.parse(parsed.auth)
          } catch (err) {
            // No valid cookie found
          }
          commit('setAuth', auth)
        }
      },

4. axios 차단기 token 을 header 에 추가

     let token = Cookie.get('auth')
      // console.log(token)
      if (token) {
        config.headers = {
          'Authorization': `Token ${token}`
        }
      }

demo 참조:https://github.com/liuzhumin/nuxt-demo.git