nuxt系列【二】用户登录存储用户信息和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数据。如果头部不含用户信息，即cookie失效则重新登录。

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