vue 在前置守卫中获取到token和用户信息直接跳过登录
时间: 2024-10-01 17:02:04 浏览: 20
Vue 中的前置守卫(如 `beforeEach` 或者路由配置中的全局守卫),通常用于验证用户的权限和状态。如果你想要在守卫中直接获取 token 和用户信息并跳过登录步骤,这通常是通过在请求头或者 vuex 存储中预先设置好这些信息来进行判断的。
假设你已经在登录成功后将 token 和用户信息存储在了 localStorage、vuex 或者 axios 的默认 headers 中:
```javascript
// 使用axios拦截器,在每次请求前检查是否有token
axios.interceptors.request.use(config => {
if (localStorage.token) {
config.headers.Authorization = 'Bearer ' + localStorage.token;
// 可能还包含用户信息
config.headers.UserInfo = JSON.parse(localStorage.userInfo);
}
return config;
}, error => {
return Promise.reject(error);
});
// 路由守卫
router.beforeEach(async(to, from, next) => {
try {
const { token, userInfo } = await axios.get('/checkAuth'); // 假设有个检查token的API
// 如果已经有了token,说明已经登录过了
if (token && userInfo) {
// 更新 store 或者 vuex state
Vue.prototype.$store.dispatch('setUser', userInfo);
// 直接导航
next();
} else {
next(); // 没有token,正常进入登录页
}
} catch (error) {
// 失败处理,比如跳转到错误页面
next({ path: '/login', query: { redirect: to.fullPath } });
}
});
```
在这个例子中,如果在请求头里找到了 token 和用户信息,那么就认为用户已经登录过了,直接让路由继续。如果 token 不存在或者验证失败,则按照正常的流程进行下一步操作,可能是显示登录界面或重定向回登录页。