关于 vue 路由拦截的疑惑

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1973 天前的主题，其中的信息可能已经有所发展或是发生改变。

今天在做 vue 前端的登录功能，查了一圈中文文章，基本上都是这个版本：

路由设置 meta

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

进入路由之前查看 vuex 里的 token

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();
    }
})

拦截所有的 http 请求

// 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)   // 返回接口返回的错误信息
    });

看完这些我有一个疑问，这样真的能做到路由拦截吗。如果我根本没登录，我把 store 里的 token 随便写个值，然后访问 /admin，就完全可以到 admin 界面去，只是没法访问 API 而已。

token

path

return

10 条回复 • 2018-12-02 12:22:55 +08:00

SPACELAN

2018-12-01 22:24:15 +08:00

服务器收到无效的 token 之后回返回 401，然后被你代码重定向到登录页去

hanzichi

2018-12-01 22:28:42 +08:00

你试试不就知道了

YuxiangLuo

2018-12-01 22:48:04 +08:00

@SPACELAN 如果 admin 界面的生命周期内没有自动发送过 http 请求呢。

YuxiangLuo

2018-12-01 22:49:24 +08:00

@hanzichi 还没有想到试试的理由

wu67

2018-12-01 23:03:37 +08:00

一楼正解

如果 admin 界面的生命周期内没有自动发送过 http 请求呢?

没有 http 请求的页面, 进去了又能怎样, 又没什么不能看的东西. 只有通过请求返回的数据才需要用户验证

liaohongxing

2018-12-01 23:10:07 +08:00

1. 尽量用 vue-cli 的打包功能，打包后能稍微混淆一下变量，不易查看源码，基本不能修改到 store
2. 访问 api 要携带 session 的 cookie 或在 header 携带公共 token, token 在登陆时获取。服务器 api 层面统一根据 token 返回过期 result, 这样访问 api 后，因为返回的过期 result, 根据 result 的值，直接重定向到登陆界面路由,让客户端重新登陆。

要想自动过期设个定时 ping 一下空 api 的即可, 不定时也可以，因为按照上面的，客户端只要随便点一下需要跟后台交互的页面，就直接会重定向了，效果一样的。

crs0910

2018-12-01 23:34:54 +08:00 via iPhone

异步组件加 js 资源鉴权可能可以解决你的问题

YuxiangLuo

2018-12-02 00:10:48 +08:00

@crs0910 我也是这个想法√，只是不知道有 JS 资源鉴权这个东西，需要研究一下。

shintendo

2018-12-02 08:30:17 +08:00

前端路由拦截不是为了安全，是为了体验，所以不用考虑“把 store 里的 token 随便写个值，然后访问 /admin ”这种行为

watzds

2018-12-02 12:22:55 +08:00 via Android

莫名其妙。有问题的是随便填个值…