Nuxt custom auth middleware implements token persistence

Nuxt custom auth middleware implements token persistence

The core point is, process.serverunder the presence of data in the cookie before and then store.commitit

auth.js

/* eslint-disable no-unused-vars */
/* eslint-disable no-useless-return */

export const TokenKey = 'Admin-token'

/**
 * 解析服务端拿到的cookie
 * @param {*} cookie
 * @param {*} key
 */
export function getCookie(cookie, key) {
    
    
  if (!cookie) return
  const arrstr = cookie.split('; ')
  for (let i = 0; i < arrstr.length; i++) {
    
    
    const temp = arrstr[i].split('=')

    if (temp[0] === key) return unescape(temp[1])
  }
}

// 登录页
const loginPath = '/login'
// 首页
const indexPath = '/home'
// 路由白名单，直接绕过路由守卫
const whiteList = [loginPath]

/**
 * @description  鉴权中间件，用于校验登陆
 *
 */
export default async ({
    
     store, redirect, env, route, req }) => {
    
    
  const {
    
     path, fullPath, query } = route
  const {
    
     redirect: redirectPath } = query

  // 应对刷新 vuex状态丢失的解决方案
  if (process.server) {
    
    
    const cookie = req.headers.cookie
    const token = getCookie(cookie, TokenKey)

    // 设置登录状态
    if (token) {
    
    
      store.commit('LOGIN', token) //'LOGIN' 和store中的mutations对应起来就可以了
    }

    if (token) {
    
    
      // 已经登录，进来的是登录页，且有重定向的路径，直接调跳到重定向的路径
      if (path === loginPath && path !== redirectPath) {
    
    
        redirect(redirectPath)
      } else if (path === '/') {
    
    
        redirect(indexPath)
      } else {
    
    
        // 其他的已经登录过得直接跳过
        return
      }
    } else {
    
    
      // 鉴权白名单
      if (whiteList.includes(path)) return

      // 未登录，进来的不是是登录页，全部重定向到登录页
      if (!path.includes(loginPath)) {
    
    
        redirect(`${
      
      loginPath}?redirect=${
      
      encodeURIComponent(fullPath)}`)
      }
    }
  }
}