axios vue 表单验证_vue 实现axios拦截、页面跳转和token 验证

第一步: 路由 多添加一个自定义字段 requireAuth

path: '/repository',

name: 'repository',

meta: {

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

},

component: Repository

第二步:

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

}

登录拦截到这里就结束了吗？并没有。

这种方式只是简单的前端路由控制，并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)

还有一种情况便是：当前token失效了，但是token依然保存在本地。

这时候你去访问需要登录权限的路由时，实际上应该让用户重新登录。

这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来