今天在做 vue 前端的登录功能,查了一圈中文文章,基本上都是这个版本:
const routes = [
{
path: '/',
name: '/',
component: Index
},
{
path: '/repository',
name: 'repository',
meta: {
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
},
component: Repository
},
{
path: '/login',
name: 'login',
component: Login
}
];
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 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 而已。
1
SPACELAN 2018-12-01 22:24:15 +08:00
服务器收到无效的 token 之后回返回 401,然后被你代码重定向到登录页去
|
2
hanzichi 2018-12-01 22:28:42 +08:00
你试试不就知道了
|
3
YuxiangLuo OP @SPACELAN 如果 admin 界面的生命周期内没有自动发送过 http 请求呢。
|
4
YuxiangLuo OP @hanzichi 还没有想到试试的理由
|
5
wu67 2018-12-01 23:03:37 +08:00 1
一楼正解
如果 admin 界面的生命周期内没有自动发送过 http 请求呢? 没有 http 请求的页面, 进去了又能怎样, 又没什么不能看的东西. 只有通过请求返回的数据才需要用户验证 |
6
liaohongxing 2018-12-01 23:10:07 +08:00 1
1. 尽量用 vue-cli 的打包功能,打包后能稍微混淆一下变量,不易查看源码,基本不能修改到 store
2. 访问 api 要携带 session 的 cookie 或在 header 携带公共 token, token 在登陆时获取。服务器 api 层面统一根据 token 返回过期 result, 这样访问 api 后,因为返回的过期 result, 根据 result 的值,直接重定向到登陆界面路由,让客户端重新登陆。 要想自动过期 设个定时 ping 一下空 api 的即可, 不定时也可以 ,因为按照上面的,客户端只要随便点一下需要跟后台交互的页面,就直接会重定向了,效果一样的。 |
7
crs0910 2018-12-01 23:34:54 +08:00 via iPhone 1
异步组件加 js 资源鉴权可能可以解决你的问题
|
8
YuxiangLuo OP @crs0910 我也是这个想法√,只是不知道有 JS 资源鉴权这个东西,需要研究一下。
|
9
shintendo 2018-12-02 08:30:17 +08:00 2
前端路由拦截不是为了安全,是为了体验,所以不用考虑“把 store 里的 token 随便写个值,然后访问 /admin ”这种行为
|
10
watzds 2018-12-02 12:22:55 +08:00 via Android
莫名其妙。有问题的是随便填个值…
|