Vue SSR 项目 Nuxt.js 框架之《路由守卫》

# 前言

nuxt的路由守卫和Vue差不多，也分为前置守卫和后置守卫等。略有不同的是nuxt实现的方式是可以通过中间件和插件的方式，具体的咱们往下瞅。

# 前置：全局守卫

这里的全局守卫实现方式有三种，分别是通过nuxt.config.js配置文件指向middleware和layouts文件夹下默认的布局模板default.vue文件以及插件的形式实现。

方式1：middleware

首先在middleware文件夹下创建auth.js文件，如下：

export default ({ store, route, redirect, params, query, req, res }) => {

    // store：状态树信息
    // route：目标路由信息
    // redirect：重定向路由
    // params, query 参数

    // 每次路由跳转前都会执行此方法，可根据需要做处理
    // 如：校验参数是否合法、store是否有值，用户是否有访问权限 ...
}

接着需要在nuxt.config.js配置文件中进行配置，如下：

export default{
    router: {
        // 这里会自动和`middleware`文件夹里的文件进行匹配
        middleware: 'auth.js'
    }
}

最后重启之后就可以看到我们实现的效果。

方式2：layouts

布局页面default.vue是页面级别的，所以需要写在页面的middleware钩子函数里，如下：

布局页面 default.vue

export default{
    middleware({ store, route, redirect, params, query, req, res }) => {
        // store：状态树信息
        // route：目标路由信息
        // redirect：重定向路由
        // params, query 参数

        // 每次路由跳转前都会执行此方法，可根据需要做处理
        // 如：校验参数是否合法、store是否有值，用户是否有访问权限 ...
   }
}

方式3：通过插件的方式

首先在plugins文件夹下创建routes.js文件，内容如下：

export default ({app, store, route, redirect, params, query})=>{
    // app：vue 实例
    app.router.beforeEach((to, from, next) => {
       // 这里的写法就和 Vue 的写法一样了
    });
}

接着需要在nuxt.config.js配置文件中进行配置，如下：

export default{
    plugins: [ '@/plugins/router']
}

最后重启之后就可以看到我们实现的效果。

# 前置：组件独享守卫

组件独享守卫与布局页面default.vue全局守卫实现方式一样，都是页面级别的。只不过default.vue是全局的，而组件独享守卫是针对单个页面的。我们以首页home.vue为例，如下：

页面 home.vue

export default{
    middleware({ store, route, redirect, params, query, req, res }) => {
        // store：状态树信息
        // route：目标路由信息
        // redirect：重定向路由
        // params, query 参数

        // 每次路由跳转前都会执行此方法，可根据需要做处理
        // 如：校验参数是否合法、store是否有值，用户是否有访问权限 ...
   }
}

# 后置：全局守卫

通过插件的形式实现，在plugins文件夹下router.js文件代码如下：

// app：vue 实例
export default ({app, store, route, redirect, params, query})=>{
    // 前 置
    app.router.beforeEach((to, from, next) => {
       // 这里的写法就和 Vue 的写法一样了
    });
    // 后 置
    app.router.afterEach((to, from) => {
       // 这里的写法就和 Vue 的写法一样了
    });
}

其他组件独享卫士和Vue一样：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，大家可以试下，欢迎留言~~