vue中 请求拦截器和路由守卫的区别？

以下路由导航守卫和axios拦截，仅提供参考

1. 导航守卫：拦截组件

• 导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过，如果登陆过，则可以跳转，否则重定向到登录页面

• 导航守卫只是前端做出判断，检查请求头中是否带有token，并不能判断token是否失效

• 导航守卫用于判断该路由的访问，该用户是否需有权限登录该页面

登录拦截逻辑

第一步：路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth和role，用于判断该路由的访问是否需要登录该用户是否需有权限登录该页面，如果用户已经登录，则顺利进入路由， 否则就进入登录页面。

现在以 superadmin、admin、user 三种不同的用户角色为例，在定义路由时，加上该路由可以由哪种用户角色来访问，代码如下所示:

比如说，/HelloWorld 页面这三种用户角色均可访问，/SuperAdmin 页面只能由 superadmin 这一个角色访问。

{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld,
meta: {

requireAuth: true,// 添加该字段，表示进入这个路由是需要登录的

roles: ['superadmin','admin','user']//表示该路由superadmin、admin、user 三种角色都可以访问

}
},
{
path: '/SuperAdmin',
name: 'SuperAdmin',
component: SuperAdmin,
meta: {requireAuth: true, roles: ['superadmin']}
},
{
path: '/Admin',
name: 'Admin',
component: Admin,
meta: {requireAuth: true, roles: ['admin']}
},
{
path: '/User',
name: 'User',
component: User,
meta: {requireAuth: true, roles: ['user']}

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {

    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限

        if (store.state.token) {  // 通过vuex state获取当前的token是否存在

            next();

        }

        else {// 说明没有登陆，则重定向到登陆页

            next({

                path: '/login',

                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由

            })

        }

    }

    else {

        next();

    }

})

其中，to.meta中是我们自定义的数据，其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话，同时当前应用不存在token，则跳转到登录页面，进行登录。登录成功后跳转到目标路由。

登录拦截到这里就结束了吗？并没有。这种方式只是简单的前端路由控制，并不能真正阻止用户访问需要登录权限的路由。还有一种情况便是：当前token失效了，但是token依然保存在本地。这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。 这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

 

2. axios拦截器：拦截后端接口

• 每次发送请求之前判断vuex或者本地存储中是否存在token

• 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

• 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

3.导航守卫和axios拦截器的区别

• 导航守卫就是路由守卫，想进入一个页面时，判断是否有权限访问(有token，就有权限，没有就返回)，但并不能判断是否失效。

• axios拦截器是发送请求判断token的有效性，如果有就将token放在请求头里。

• 导航守卫和axios拦截器一起使用，进而来确保登录的状态