vue实现登录路由拦截
路由拦截实现原理
Vue中实现登录路由拦截主要依赖Vue Router的导航守卫功能。通过全局前置守卫beforeEach，可以在路由跳转前进行权限校验，未登录用户访问受限路由时重定向到登录页。
安装Vue Router
确保项目已安装Vue Router。若未安装，可通过以下命令安装：
npm install vue-router配置路由文件
在router/index.js中配置基本路由和需要权限校验的路由：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Home from '@/views/Home.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/home',
name: 'Home',
component: Home,
meta: { requiresAuth: true } // 添加路由元信息标识需要登录
}
]
})实现导航守卫
在router/index.js中添加全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token') // 假设token存储在localStorage
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated) {
next({ path: '/login', query: { redirect: to.fullPath } })
} else {
next()
}
} else {
next()
}
})登录逻辑处理
在登录组件中，登录成功后跳转到原访问页面或默认页面：
methods: {
handleLogin() {
// 模拟登录成功
localStorage.setItem('token', 'mock-token')
const redirect = this.$route.query.redirect || '/home'
this.$router.push(redirect)
}
}路由白名单配置
对于无需校验的公开路由（如登录页、注册页），可配置白名单避免循环重定向：
const whiteList = ['/login', '/register']
router.beforeEach((to, from, next) => {
const hasToken = localStorage.getItem('token')
if (hasToken) {
if (to.path === '/login') {
next({ path: '/' })
} else {
next()
}
} else {
if (whiteList.includes(to.path)) {
next()
} else {
next(`/login?redirect=${to.path}`)
}
}
})动态路由权限控制
如需根据用户角色动态生成路由，可结合addRoutes方法：
// 在登录成功后
import { adminRoutes, userRoutes } from './dynamicRoutes'
router.addRoutes(userHasAdminRole ? adminRoutes : userRoutes)退出登录处理
清除认证信息并重定向到登录页：
logout() {
localStorage.removeItem('token')
this.$router.push('/login')
}注意事项
- 敏感路由应始终在服务端进行二次验证
- 避免将认证令牌仅存储在客户端
- 考虑使用Vuex集中管理认证状态
- 对于SPA应用，需配置服务器避免直接访问路由返回404
