Vue2 Vuex状态管理与路由守卫登录权限控制实践

脚本专家

在前端项目里，组件通信只能解决父子层级的问题，一旦数据要跨页面共享、路由要按登录状态放行、接口实例要全局复用，就需要把 mixin、插件、Vuex、本地存储和 Vue Router 组合起来用。下面按“复用逻辑—全局能力—状态集中—路由控制”的顺序，梳理一套 Vue 2 项目里可直接落地的实现方式，文中的命令、配置与代码逻辑均来自原文示例。

一、组件通信的边界在哪里
父子组件通信的基础手段是 props 向下传值、$emit 向上通知，父组件需要命令式操作子组件时用 $refs。当数据层级较深、多个页面都要读写同一份数据时，继续靠 props 逐层透传就会失控，这时应交给 Vuex 或 Pinia 集中管理。这是后面所有方案的前提判断：局部数据留在组件内，跨页面共享数据才进 store。

二、用 mixin 抽取重复选项
混入适合把多个组件重复出现的 data、方法和生命周期逻辑提取出来。组件引入混入后，混入对象会与组件自身选项合并，同名冲突时组件自身选项优先，生命周期钩子则依次执行。

2. // src/mixins/userMixin.js
3. export default {
4.   data() {
5.     return { userName: '访客' }
6.   },
7.   methods: {
8.     resetUserName() {
9.       this.userName = '访客'
10.     }
11.   }
12. }
14. // 组件内引入
15. import userMixin from '@/mixins/userMixin'
16. export default {
17.   name: 'ProfileView',
18.   mixins: [userMixin]
19. }

复制代码

也可以在 main.js 中通过 Vue.mixin() 注册全局混入，但它会作用到每一个组件，容易带来隐式依赖和命名冲突。除非逻辑足够通用，否则优先用局部混入或组合式工具函数。

三、插件：把全局能力收口到 install
插件的本质通常是带有 install(Vue, options) 方法的对象，调用 Vue.use(plugin) 时 Vue 会自动执行它。常见用途包括注册组件、注册自定义指令、挂载原型方法。下面把 axios 实例封装成插件：

2. // src/plugins/http.js
3. import axios from 'axios'
4. const http = axios.create({
5.   baseURL: 'http://127.0.0.1:8000',
6.   timeout: 5000
7. })
9. export default {
10.   install(Vue) {
11.     // Vue 2 中通过原型提供 this.$http
12.     Vue.prototype.$http = http
13.   }
14. }
16. // main.js
17. import Vue from 'vue'
18. import App from './App.vue'
19. import httpPlugin from '@/plugins/http'
20. Vue.use(httpPlugin)
22. new Vue({
23.   render: h => h(App)
24. }).$mount('#app')

复制代码

注册后组件里直接 this.$http.get(...) 即可，无需每个文件重复创建实例。指令同样可以放在插件中注册，例如自动聚焦：

2. Vue.directive('focus', {
3.   inserted(element) {
4.     element.focus()
5.   }
6. })

复制代码

Vue Router、Vuex、Element UI 这些第三方库也是通过 Vue.use() 接入的。插件挂到原型上的能力建议统一使用 $ 前缀命名，降低与组件自身 data、methods 撞名的概率。

四、插槽：子组件定布局，父组件填内容
默认插槽与具名插槽让父组件向子组件注入内容，子组件只负责整体结构，标题、正文、按钮等可变部分由父组件提供，适合卡片、弹窗、布局类组件。

2. <!-- AboutView.vue -->
3. <template>
4.   <ContentCard>
5.     <template slot="header"><h2>关于页面</h2></template>
6.     <p>这里是父组件传入的正文。</p>
7.     <template slot="footer"><button>确定</button></template>
8.   </ContentCard>
9. </template>
11. <!-- ContentCard.vue，Vue 2 写法 -->
12. <template>
13.   <section class="card">
14.     <header><slot name="header">默认标题</slot></header>
15.     <main><slot>默认内容</slot></main>
16.     <footer><slot name="footer"></slot></footer>
17.   </section>
18. </template>

复制代码

五、Vuex：state、getters、mutations、actions 的分工
Vuex 把多组件共享的数据集中放进 store，用 mutations 同步修改状态，用 actions 承载异步逻辑或业务流程。Vue 3 项目也能用 Vuex，但新项目一般优先 Pinia。

创建 store 的写法：

2. // src/store/index.js
3. import Vue from 'vue'
4. import Vuex from 'vuex'
5. Vue.use(Vuex)
7. export default new Vuex.Store({
8.   state: {
9.     count: 100
10.   },
11.   getters: {
12.     doubleCount(state) {
13.       return state.count * 2
14.     }
15.   },
16.   mutations: {
17.     add(state, amount) {
18.       state.count += amount
19.     }
20.   },
21.   actions: {
22.     addCount({ state, commit }, amount) {
23.       if (state.count + amount > 105) return
24.       commit('add', amount)
25.     }
26.   }
27. })

复制代码

这里的角色划分很明确：state 存共享数据，getters 负责派生计算，mutations 是同步改状态的唯一推荐入口，actions 可以放异步逻辑并通过 commit 提交 mutation。上面的 addCount 演示了在 action 里先做上限校验再提交，避免无效的状态变更。

入口注册 store：

2. // main.js
3. import Vue from 'vue'
4. import App from './App.vue'
5. import store from './store'
7. new Vue({
8.   store,
9.   render: h => h(App)
10. }).$mount('#app')

复制代码

组件中读取与派发：

2. <template>
3.   <div>
4.     <p>数量：{{ $store.state.count }}</p>
5.     <p>两倍数量：{{ $store.getters.doubleCount }}</p>
6.     <button @click="increase">增加</button>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   methods: {
13.     increase() {
14.       this.$store.dispatch('addCount', 1)
15.     }
16.   }
17. }
18. </script>

复制代码

需要强调的是不要在组件里直接改 this.$store.state，绕过 mutation 后状态变化难以追踪。另外小型项目不必把所有变量都塞进 Vuex，只有跨页面或跨组件共享、且需要统一修改规则的状态才值得集中管理。

六、本地存储的封装与 token 取舍
浏览器常见存储有三类：Cookie 可设置过期时间且会随请求发送；sessionStorage 只在当前标签页会话内有效；localStorage 长期保存，除非主动删除或清理站点数据。三者都不适合存放密码等高敏感信息。

localStorage 与 sessionStorage 只能存字符串，数组和对象必须先序列化：

2. const user = { name: 'lqz', age: 19 }
3. localStorage.setItem('user', JSON.stringify(user))
4. const savedUser = JSON.parse(localStorage.getItem('user') || '{}')
6. sessionStorage.setItem('draft', '临时内容')
7. sessionStorage.removeItem('draft')
8. localStorage.removeItem('user')

复制代码

直接 JSON.parse 空值或脏数据会抛异常，因此建议封装一层读写方法统一处理：

2. export function setStorage(key, value) {
3.   localStorage.setItem(key, JSON.stringify(value))
4. }
6. export function getStorage(key, fallback = null) {
7.   const value = localStorage.getItem(key)
8.   if (value === null) return fallback
9.   try {
10.     return JSON.parse(value)
11.   } catch {
12.     return value
13.   }
14. }

复制代码

登录 token 存哪里要结合安全策略决定：localStorage 使用简单，但 XSS 可以读取其中的 token；HttpOnly Cookie 能降低脚本读取风险，但需要配合 CSRF 防护。永久保存不等于安全保存，这一点在选型时常被忽略。

七、Vue Router 安装、配置与跳转参数
Vue Router 负责把 URL 映射到页面组件：router-view 是页面组件的渲染位置，router-link 是声明式导航，this.$router 用于代码跳转，this.$route 表示当前路由信息。

Vue 2 对应 Vue Router 3，安装命令如下：

2. npm install vue-router@3

复制代码

2. // src/router/index.js
3. import Vue from 'vue'
4. import VueRouter from 'vue-router'
5. import HomeView from '@/views/HomeView.vue'
6. import AboutView from '@/views/AboutView.vue'
7. Vue.use(VueRouter)
9. export default new VueRouter({
10.   mode: 'history',
11.   routes: [
12.     { path: '/', name: 'home', component: HomeView },
13.     { path: '/about', name: 'about', component: AboutView }
14.   ]
15. })

复制代码

2. <!-- App.vue -->
3. <template>
4.   <div id="app">
5.     <router-link to="/">首页</router-link>
6.     <router-link to="/about">关于</router-link>
7.     <router-view />
8.   </div>
9. </template>

复制代码

最后把 router 注入根实例：

2. import router from './router'
4. new Vue({
5.   router,
6.   render: h => h(App)
7. }).$mount('#app')

复制代码

传参方面，query 适合筛选、分页这类可选信息，不会改变路由匹配的组件；params 配合路径参数更适合标识某个资源：

2. // JavaScript 跳转
3. this.$router.push({
4.   name: 'about',
5.   query: { name: '张三', age: 19 }
6. })
8. this.$router.push({
9.   name: 'user',
10.   params: { id: 10 }
11. })
13. // 路由配置：路径参数
14. { path: '/user/:id', name: 'user', component: UserView }
16. // UserView.vue 中读取
17. const id = this.$route.params.id
18. const name = this.$route.query.name

复制代码

push 会新增浏览历史，replace 替换当前记录，back() 与 go(-1) 返回上一页。需要记住：路由参数来自地址栏，不能直接当作权限依据，敏感操作仍要由后端认证。

八、嵌套路由支撑后台布局
后台管理页面通常共享顶部和侧边栏，只替换右侧内容，这时用嵌套路由。父组件里必须放 router-view，子路由才有渲染位置。

2. const routes = [
3.   {
4.     path: '/backend',
5.     component: () => import('@/views/BackendView.vue'),
6.     children: [
7.       { path: '', component: () => import('@/views/backend/IndexView.vue') },
8.       { path: 'orders', component: () => import('@/views/backend/OrderView.vue') },
9.       { path: 'goods', component: () => import('@/views/backend/GoodsView.vue') }
10.     ]
11.   }
12. ]

复制代码

2. <!-- BackendView.vue -->
3. <template>
4.   <div class="backend">
5.     <aside>
6.       <router-link to="/backend">首页</router-link>
7.       <router-link to="/backend/orders">订单</router-link>
8.       <router-link to="/backend/goods">商品</router-link>
9.     </aside>
10.     <main><router-view /></main>
11.   </div>
12. </template>

复制代码

子路由的空 path 对应默认页，切换 orders、goods 时只有 main 内的 router-view 内容变化，侧边栏不会重新渲染。

九、路由守卫做登录保护
全局前置守卫在页面跳转前执行，可用来检查 token、角色或权限。它只负责前端导航体验，接口层权限必须由后端再次校验。

2. router.beforeEach((to, from, next) => {
3.   const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
4.   const token = localStorage.getItem('access')
5.   if (requiresAuth && !token) {
6.     next({ name: 'login', query: { redirect: to.fullPath } })
7.   } else if (to.name === 'login' && token) {
8.     next({ name: 'home' })
9.   } else {
10.     next()
11.   }
12. })

复制代码

需要保护的路由通过 meta 标记，to.matched 会匹配嵌套路由链上的所有记录，因此父级标记即可覆盖其子路由：

2. {
3.   path: '/backend',
4.   component: BackendView,
5.   meta: { requiresAuth: true }
6. }

复制代码

从上面代码可以看到，每个分支都要为 next 给出明确结果：未登录带着 redirect 跳到登录页，已登录再访问登录页则回到首页。登录成功后读取 redirect 查询参数可以回到用户原本要访问的页面，但必须限制跳转为本站路径，否则会形成开放重定向风险。

十、Hash 与 History 模式的选择
Hash 模式用 URL 中 # 之后的内容表示前端路由，例如 /#/about。浏览器不会把 hash 发送给服务器，部署简单、兼容性好，但地址不够简洁。History 模式使用 /about 这样的正常路径，地址美观，但刷新页面时服务器必须把未知路径回退到 index.html，否则直接 404。选模式时前端需求与后端部署配置要一并考虑：没有可配置的 fallback 规则时，Hash 模式更稳妥。

十一、落地检查清单
1. 重复的 data、方法、生命周期逻辑抽到局部 mixin，慎用 Vue.mixin 全局注册。
2. 全局 axios 实例与自定义指令通过插件 install 统一挂载，原型方法加 $ 前缀。
3. 跨页面共享状态进 Vuex，修改只走 mutations，异步与业务校验放 actions。
4. 存储读写统一封装，JSON 解析异常要有兜底，token 存放方式按 XSS、CSRF 与过期策略权衡。
5. 后台布局用嵌套路由，父组件保留 router-view；受保护路由用 meta.requiresAuth 标记。
6. 守卫只解决导航体验，redirect 只允许站内跳转，接口权限交由后端校验。

按这套结构实现一个带登录保护的后台管理页面：登录后进入嵌套路由，刷新仍能恢复 token，退出后所有受保护路由都跳回登录页，就是一次完整的状态管理与权限控制串联练习。

热心网友5

楼主这个梳理挺有条理的，按“复用逻辑—全局能力—状态集中—路由控制”的顺序展开，比一上来就堆代码更容易理解。前面几个点也踩得比较准：父子通信确实有边界，跨页面共享数据再上 Vuex 比较合理；mixin 的合并规则和生命周期执行顺序也讲清楚了，尤其提醒全局混入容易带来隐式依赖，这点很实用。插件那部分把 axios 实例收口到 install 里，统一挂 this.$http，并建议用 $ 前缀降低撞名概率，也是实际项目里常用的做法。插槽那段用卡片组件举例，把“子组件定布局、父组件填内容”的分工说明白了。 不过看正文到 actions 那里好像被截断了，addCount 后面的内容、以及标题里提到的路由守卫登录权限控制还没展开，有点可惜。如果后续能补上 Vuex 模块化拆分、token 存本地存储后怎么在路由 beforeEach 里判断放行、以及登录后动态跳转或重定向的处理，就更完整了。整体思路是清楚的，适合 Vue2 项目拿来对照落地。

热心网友5

这篇梳理挺清楚的，从组件通信边界讲到 mixin、插件、插槽和 Vuex，再落到路由守卫和登录权限，顺序很适合项目里按需落地。几个点我比较认同：跨页面共享数据才进 store，局部状态别硬塞 Vuex；全局 mixin 确实要慎用，局部 mixin 更好控；插件把 axios 实例收口到 install、原型方法加 $ 前缀也很实用。Vuex 部分示例里 actions 似乎还没贴完，后面如果继续写登录权限，建议把 mutation 只做同步状态修改、action 里 commit、路由守卫里判断登录态和重定向讲清楚，配合本地存储时注意避免重复跳转或死循环。整体是一篇很实操的整理，期待路由守卫那部分展开。

热心网友5

楼主这篇梳理得挺有条理的，从组件通信边界讲到 mixin、插件、插槽，再过渡到 Vuex，这个顺序对刚接手 Vue2 老项目的人比较友好。mixin 同名选项合并优先级和全局混入的隐式依赖风险点说得清楚，插件里把 axios 实例收口到 install、统一用 $ 前缀命名这些细节也确实能少踩坑，插槽部分用卡片组件举例也很直观。 不过看到 actions 里的 addCount 那里好像被截断了，标题里提到的路由守卫和登录权限控制还没展开。实战里比较关心的几个点，比如登录态到底放 Vuex 还是 localStorage、全局前置守卫怎么维护白名单、刷新页面后 store 状态丢失怎么恢复、以及接口 401 时怎么和路由跳转配合，这些正是容易出问题的地方，期待楼主把后半部分补完。