Nuxt的middleware中间件使用方法

2021-07-28 11:35:41

首先申明,我们使用的vue3且有一个vue-cli的后台,前台为了SEO和加载效率,所以选择了NUXT框架

其次,由于我们想做多皮肤功能,所以在用户访问网页之前,先确定管理员设置的前台网页使用的哪一个皮肤,这里用到了中间件概念。 使用函数定义一个页面的中间件,会在页面初始化之前调用

middleware目录中,新建一个whichSkin.TS文件,调用中间件的方法有两种;

一种的是在nuxt.config.js中的router添加middleware参数

 router:{
    middleware: 'whichSkin',
    extendRoutes(routes, resolve) {
      console.log(routes)
      // routes.push({
      //   path: '/users/:id'
      // })
    }
  },

另一种是直接在页面上添加

//例如urer.vue
export default {
  middleware: 'whichSkin',
}

whichSkin.ts文件内容添加(我直接添加的官网代码)

export default function ({route, store, redirect }) {
  console.log(route)
  // If the user is not authenticated
  // if (!store.state.authenticated) {
  //   return redirect('/login')
  // }
}

迷惑行为来了,除了官网给的route, store, redirect, 中间件的参数有哪些?打出来看看吧

export default function (app) {
  console.log(app) 
}

chorme控制台显示打印的内容为:

$axios: ƒ wrap()
$config: {}
app: {head: {…}, store: Store, router: VueRouter, nuxt: {…}, render: ƒ, …}
base: "/"
env: {}
error: ƒ ()
from: {name: "default-siteid", meta: Array(2), path: "/default/4wzv92/", hash: "", query: {…}, …}
isDev: true
isHMR: false
isStatic: false
next: ƒ ()
nuxtState: {serverRendered: true, routePath: ""/default/4wzv92/""}
params: {catname: undefined, id: undefined, __ob__: Observer}
payload: undefined
query: {}
redirect: ƒ (status, path, query)
route: {name: "default-siteid", meta: Array(2), path: "/default/4wzv92/", hash: "", query: {…}, …}
store: Store {_committing: false, _actions: {…}, _actionSubscribers: Array(1), _mutations: {…}, _wrappedGetters: {…}, …}
_errored: false
_redirected: false

既然知道了有这些参数,那就好办了,想鉴权,想重定向,想axios请求...没人拦你了,去吧,皮卡丘!!!

注意: 新标签使用middleware中间件在server端请求数据,此时提交到vuex store,发现并不能更新store,而且数据不一致。使用nuxtServerInit来初始化即可。

ok, 就写到这里,继续搬砖了!

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2021 zhmzjl.com | by: KAPO