nuxt 路由验证几种方式

nuxt 路由验证几种方式

插件的方式，client模式（错误方法）

• route虽然可以拿到meta，但是在开发的时候按下保存，此时浏览器在哪个页面那么此route对象就是哪个路由对象，构建的时候确定了哪个路由对象就是哪个路由对象，所以在页面发生跳转后不会进行更新，此处不跟路由中间件一样
• 要从to对象拿到要进入的对象
• to对象拿不到meta
• 在client模式下，可以拿到token

import cookie from '~/utils/cookie'
import globalVar from '~/config/globalVar'
// import { platformURL } from '~/config/index'

export default ({ app: { router }, route, store, redirect }) => {
  router.beforeEach((to, from, next) => {
    // 把需要验证的路由找到
    const routerItem = route.meta.find((item) => {
      return 'requiresAuth' in item && item.requiresAuth
    })
    /**
    	+ route 在构建的时候是哪个路由就是哪个路由
    	+ to可以拿到要进入的路由
    	+ to里面拿不到meta
    **/
    console.log(route, routerItem, to)
    if (routerItem) {
      // 可以拿到token
      const token = cookie.get(globalVar.WEB_TOKEN)
      if (token) {
        next()
      } else {
        next()
        console.log(1)
        // redirect(platformURL)
      }
    } else {
      next()
    }
  })
}

插件的方式，client模式，列出要验证的路由（正确方法，兼容SSR和静态渲染）

• 在client模式下拿到token
• 在to对象拿到要进入的路由
• 通过authRoutes定义要验证的路由

import cookie from '~/utils/cookie'
import globalVar from '~/config/globalVar'
import { platformURL } from '~/config/index'

export default ({ app: { router }, redirect }) => {
  router.beforeEach((to, from, next) => {
    /**
        + route 在构建的时候是哪个路由就是哪个路由
        + to可以拿到要进入的路由
        + to里面拿不到meta
    **/
    console.log('to', to)
    const authRoutes = [
      '/resource-search'
    ]
    const isAuth = authRoutes.includes(to.path)
    if (isAuth) {
      const token = cookie.get(globalVar.WEB_TOKEN)
      if (token) {
        next()
      } else {
        redirect(platformURL)
      }
    } else {
      next()
    }
  })
}

路由中间件方式配合store，只适用于SSR模式，不适用于静态渲染

• 在nuxtServerInit此内置方法中，因为是SSR,所以拿的到req,通过req拿到cookie，判断本地是否登录，如果登录了则设置store中的state中的isLogin状态

// store/index.js
import globalVar from '~/config/globalVar'

const cookieparser = process.server ? require('cookieparser') : undefined

// state
export const state = () => ({
  isLogin: false,
})

// 设置方法
export const mutations = {
  setIsLogin (state, data) {
    state.isLogin = data
  }
}

export const actions = {
  // nuxt 服务器初始化
  nuxtServerInit ({ commit }, { req }) {
    // 因为是SSR,所以拿的到req,通过req拿到cookie，判断本地是否登录
    let isLogin = false
    if (req.headers.cookie) {
      const parsed = cookieparser.parse(req.headers.cookie)
      console.log(parsed)
      isLogin = parsed[globalVar.WEB_TOKEN] ? parsed[globalVar.WEB_TOKEN] : false
    }
    // 设置登录状态
    commit('setIsLogin', isLogin)
  }
}

• 在ssr模式下，可以在中间件中拿到变化过的store.state，此时就可以直接判断是否登录，因为在上异步已经通过req.headers.cookie检查过是否存在token
• 通过当前route拿到此路由的meta，如果meta存在属性requiresAuth并且其属性值为true则表示此路由需要被验证，nuxt如何设置meta查看https://github.com/nuxt/nuxt.js/tree/2.x/examples/routes-meta
• 如果验证失败则通过redirect方法跳转登录界面

// middleware/auth.js

/**
 * ssr:true
 *  + 第一次进入在service 端 永远拿不到token
 *
 * ssr:false
 *  + 可以拿到token 但是store.state.isLogin: false
 */

// import cookie from '~/utils/cookie'
// import globalVar from '~/config/globalVar'
import { platformURL } from '~/config/index'

export default ({ route, store, redirect }) => {
  // console.log(cookie, cookie.get(globalVar.WEB_TOKEN))
  // const token = cookie.get(globalVar.WEB_TOKEN)

  // 如果需要验证
  const isRequiresAuth = route.meta.find((item) => {
    return 'requiresAuth' in item && item.requiresAuth
  })
  // console.log(route, store.state, store.state.isLogin)
  if (isRequiresAuth) {
    if (!store.state.isLogin) {
      // console.log(1)
      redirect(platformURL)
    }
  }
}