• Nuxt 使用技巧


    Nuxt store vuex 登录刷新页面token 数据不见了

    store/user.js

    import { AUTHUSERKEY, TOKENKEY, ISLOGINKEY } from '~/config/constant'
    import { Message } from 'element-ui'
    
    
    export const state = () => {
      return {
        authUser: null,
        token: null,
        isLogin: false,
        homeId: 0
      }
    }
    
    export const mutations = {
      SET_USER(state, user) {
        state.authUser = user
        this.$cookies.set(AUTHUSERKEY, JSON.stringify(state.authUser))
      },
      SET_TOKEN(state, token) {
        state.token = token
        this.$cookies.set(TOKENKEY, state.token)
    
      },
    
      SET_ISLOGIN(state, isLogin = false) {
        state.isLogin = isLogin
        this.$cookies.set(ISLOGINKEY, state.isLogin)
      },
      saveHomeId(state, id) {
        if (process.client) {
          state.homeId = id
          sessionStorage.setItem('homeId', id)
          console.log(1233)
        }
      }
    
    }
    
    export const getters = {
      getUser(state) {
        return state.authUser
      },
      getToken(state) {
        return state.token
      },
      getIsLogin(state) {
        return state.isLogin
      }
    
    }
    
    export const actions = {
    
      async login({ commit }, { username, password }) {
        try {
          const { token } = await this.$axios.post('/login', { username, password })
          if (token) {
            commit('SET_TOKEN', token)
            const { user } = await this.$axios.get('/getInfo')
            if (user) {
              commit('SET_USER', user)
              commit('SET_ISLOGIN', true)
            }
          }
        } catch (error) {
          if (error.response && error.response.status === 401) {
            throw new Error('Bad credentials')
          }
          throw error
        }
      },
    
      async logout({ commit }) {
        await this.$cookies.remove(AUTHUSERKEY)
        await this.$cookies.remove(TOKENKEY)
        await this.$cookies.remove(ISLOGINKEY)
      }
    
    }
    
    

    解决 办法

    注意 nuxtServerInit 必须放在store/index.js 放在其他文件里面是不起作用的。 服务端获取道数据后,再转发给 客户端 store

    import Cookie from "cookie";
    
    export const actions = {
      nuxtServerInit({commit,}, {req, redirect}) {
        if (req.headers.cookie) {
          let {AUTHUSERKEY, TOKENKEY, ISLOGINKEY} = Cookie.parse(req.headers.cookie)
          AUTHUSERKEY = AUTHUSERKEY && JSON.parse(AUTHUSERKEY)
          ISLOGINKEY = ISLOGINKEY && JSON.parse(ISLOGINKEY)
          commit('user/SET_USER', AUTHUSERKEY)
          commit('user/SET_TOKEN', TOKENKEY)
          commit('user/SET_ISLOGIN', ISLOGINKEY)
        } else {
          redirect('/login')
        }
      }
    }
    
    

    axios 请求拦截 封装

    import { Message } from 'element-ui'
    
    export default ({ env, app, $axios, store, redirect }, inject) => {
    
      $axios.defaults.baseURL = env.baseUrl
      $axios.defaults.timeout = 5000
    
      // 请求拦截
      $axios.onRequest((config) => {
        const token = store.state.user.token
        if (token) config.headers.Authorization = `Bearer ${token}`
      })
    
      // 服务器返回异常拦截
      $axios.onError((error) => {
        const code = Number(error.response && error.response.status)
        console.log(error)
      })
    
      // 接口数据返回拦截
      $axios.onResponse((response) => {
    
        const res = response.data
    
        if (res.code == 200) {
          return res
        }
        if (res.code == 401) {
    
          store.dispatch('user/logout')
    
          if (process.client) {
            Message({
              message: res.msg || '服务器错误' + res.code,
              type: 'error'
            })
          }
          redirect('/login')
    
          return Promise.reject(new Error(res.msg || 'Error'))
        }
        if (res.code == 500) {
          Message({
            message: res.msg || '服务器错误' + res.code,
            type: 'error'
          })
          return Promise.reject(new Error(res.msg || 'Error'))
        }
    
        if (res.code == 404) {
          Message({
            message: res.msg || '未找到页面' + res.code,
            type: 'error'
          })
        }
    
      })
    }
    
    
    
  • 相关阅读:
    古典问题-兔子生兔子
    order by 执行计划索引使用不同的坑
    MybatisPlus 通用枚举无法正确取值
    Arrays.asList 使用细节
    java 生成pdf文件(易上手版)
    Mysql-tinyint使用之实际采坑记
    mysql
    mysql -- froce index 使用
    java基础全套
    javaweb之servlet 全解
  • 原文地址:https://www.cnblogs.com/boyGdm/p/16275907.html
Copyright © 2020-2023  润新知