vue实现登录拦截
路由守卫实现登录拦截
在Vue项目中，可以通过路由守卫（Navigation Guards）实现登录拦截功能。路由守卫主要分为全局守卫、路由独享守卫和组件内守卫三种类型。
// 在router/index.js中配置全局前置守卫
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 检查是否存在token
const requiresAuth = to.matched.some(record => record.meta.requiresAuth) // 检查路由是否需要认证
if (requiresAuth && !isAuthenticated) {
next('/login') // 跳转到登录页
} else if (to.path === '/login' && isAuthenticated) {
next('/') // 已登录用户访问登录页时跳转到首页
} else {
next() // 正常放行
}
})路由元信息配置
在路由配置中，可以通过meta字段标记哪些路由需要登录才能访问：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
},
{
path: '/login',
component: Login
}
]登录状态管理
建议使用Vuex集中管理登录状态，而不是仅依赖localStorage：
// store/index.js
export default new Vuex.Store({
state: {
token: localStorage.getItem('token') || null
},
mutations: {
setToken(state, token) {
state.token = token
localStorage.setItem('token', token)
},
clearToken(state) {
state.token = null
localStorage.removeItem('token')
}
}
})登录逻辑实现
在登录组件中处理登录成功后设置token：
methods: {
async handleLogin() {
try {
const res = await loginApi(this.form) // 调用登录接口
this.$store.commit('setToken', res.data.token) // 存储token
this.$router.push(this.$route.query.redirect || '/') // 跳转到原访问页面或首页
} catch (error) {
console.error('登录失败', error)
}
}
}响应拦截器处理
在axios拦截器中可以统一处理401未授权情况：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
store.commit('clearToken')
router.push('/login')
}
return Promise.reject(error)
}
)动态路由处理
对于权限复杂的系统，可以结合动态路由实现更精细的控制：
// 登录后根据权限动态添加路由
function addDynamicRoutes() {
const routes = generateRoutesBasedOnPermission() // 根据权限生成路由
router.addRoutes(routes)
}退出登录处理
实现退出功能时需要清除认证信息：
methods: {
logout() {
this.$store.commit('clearToken')
this.$router.push('/login')
}
}
