Udemy - Nuxt JS with Laravel API - Building SSR Vue JS Apps 笔记13 Nuxt - Middlewares

Middleware Clear Validation

即点击登录，如果错误并出现了错误提示：

再点击切换其他页面再切换回来的时候，错误提示还存在。所以需要用middleware 在页面切换了之后 clear掉这个validation errors信息。

新建 middleware/clearValidationErrors.js

export default function ({store}) {
  store.dispatch('validation/clearErrors');
}

在nuxt.config.js中注册这个middleware

效果：

Middleware Auth

修改pages/index.vue：

<template>
  <p>Home Page</p>
</template>

<script>
  export default {
    middleware: ['auth'],
  }
</script>

跳转index首页的时候，会检测是否登录，否则会跳转至login page

Middleware Guest

新建middleware/guest.js文件：

export default function ({store, redirect}) {
  if (store.getters['authenticated']) {
    return redirect('/profile');
  }
}

为了便于测试，我们新建一个pages/profile.vue文件

<template>
  <div>
    <h2>User Profile</h2>
  </div>
</template>

<script>
  export default {
    name: "profile"
  }
</script>

<style scoped>

</style>

在login,register页面中应用这个guest中间件。

登录成功后，手动打开 http://localhost:3000/login 或register页面 就会跳转  http://localhost:3000/profile 了。

backend修改一下login错误的返回设置，不然页面不会显示提示：

然后pages/login.vue修改一下跳转的逻辑，登录成功后跳转profile，不成功则返回其原referral page

pages/register.vue页面也如此：

还有就是修正一下，pages/index.vue，即使用户不登录应该也可以看index页面的内容，所以注释掉auth中间件

源码：

https://github.com/dzkjz/laravel-backend-nuxt-frontend-frontpart

选择：