diff --git a/src/App.vue b/src/App.vue index 16afd50..3fe423d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,17 @@ @@ -58,6 +67,8 @@ onMounted(() => { + + diff --git a/src/components/LoginModal.vue b/src/components/LoginModal.vue new file mode 100644 index 0000000..1602d33 --- /dev/null +++ b/src/components/LoginModal.vue @@ -0,0 +1,148 @@ + + + + + + \ No newline at end of file diff --git a/src/components/PopGetAllowance.vue b/src/components/PopGetAllowance.vue index ec5abf8..1244628 100644 --- a/src/components/PopGetAllowance.vue +++ b/src/components/PopGetAllowance.vue @@ -6,11 +6,11 @@

领取补贴券

- +
领取即同意 - {{ item.title }}
+ {{ item.title }}
- 立即领取 -
+ 立即领取 + +
- + - +
补贴名额有限，抓紧时间领取吧!
@@ -57,7 +62,7 @@ -->
- +
+ +
+ + diff --git a/src/plugins/auth.js b/src/plugins/auth.js new file mode 100644 index 0000000..5b48de5 --- /dev/null +++ b/src/plugins/auth.js @@ -0,0 +1,24 @@ +// plugins/auth.js +import loginService from '../services/loginService' + +const AuthPlugin = { + install(app) { + // 正确注入全局属性 + app.config.globalProperties.$auth = { + check() { + return loginService.isLoggedIn(); + }, + require(callback) { + loginService.requireLogin(callback); + }, + // user() { + // return loginService.getCurrentUser ? loginService.getCurrentUser() : null; + // } + }; + + // 同时提供一个全局变量供测试使用 + window.$auth = app.config.globalProperties.$auth; + } +}; + +export default AuthPlugin; diff --git a/src/router/index.js b/src/router/index.js index e0ee006..206f406 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,4 +1,6 @@ import { createRouter, createWebHistory } from 'vue-router' +import { sendVisitLog } from '@/utils/useStatistics' +import loginService from '../services/loginService' import Home from '../pages/Home.vue' import About from '../pages/About.vue' import My from '../pages/My.vue' @@ -8,12 +10,13 @@ import MyOrder from '../pages/MyOrder.vue' import MyAllowance from '../pages/MyAllowance.vue' import MyAllowanceForm from '../pages/MyAllowanceForm.vue' import MyBank from '../pages/MyBank.vue' -import {sendVisitLog} from '@/utils/useStatistics' +import Login from '../pages/Login.vue' const routes = [ + { path: '/login', name: 'Login', component: Login }, { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }, - { path: '/my', name: 'My', component: My }, + { path: '/my', name: 'My', component: My, meta: { requiresAuth: true } }, { path: '/item/:id', name: 'Item', component: Item }, { path: '/my/coupon', name: 'MyCoupon', component: MyCoupon }, { path: '/my/order', name: 'MyOrder', component: MyOrder }, @@ -23,7 +26,23 @@ const routes = [ ] const router = createRouter({ history: createWebHistory(), routes }) - +// 全局前置守卫 +router.beforeEach((to, from, next) => { + // 检查路由是否需要认证 + if (to.meta.requiresAuth) { + // 检查用户是否已登录 + if (loginService.isLoggedIn()) { + next() + } else { + next({ + name: 'Login', + query: { redirect: to.fullPath } // 保存原目标路径 + }) + } + } else { + next() // 不需要认证的路由直接放行 + } +}) // 路由跳转后发送PV统计 router.afterEach(() => { // 检查全局的aplus_queue是否存在 @@ -34,7 +53,7 @@ router.afterEach(() => { // arguments: [{ is_auto: false }] // 按文档要求传递固定格式参数 // }) // } - console.log("发送PV统计"); - sendVisitLog(); + console.log('发送PV统计') + sendVisitLog() }) export default router \ No newline at end of file diff --git a/src/services/loginService.js b/src/services/loginService.js new file mode 100644 index 0000000..d23baa9 --- /dev/null +++ b/src/services/loginService.js @@ -0,0 +1,33 @@ +// loginService.js +class LoginService { + constructor() { + this.loginComponent = null; + } + + // 注册登录组件实例 + register(component) { + this.loginComponent = component; + } + + // 检查是否已登录 + isLoggedIn() { + // 根据实际情况判断是否登录，例如检查token或用户信息 + return !!localStorage.getItem('token'); + } + + // 需要登录时调用此方法 + requireLogin(callback) { + if (this.isLoggedIn()) { + // 已登录，直接执行回调 + if (callback) callback(); + } else { + // 未登录，显示登录弹窗 + if (this.loginComponent) { + this.loginComponent.showModal(callback); + } + } + } +} + +// 导出单例实例 +export default new LoginService(); diff --git a/src/stores/index.js b/src/stores/index.js new file mode 100644 index 0000000..c8c7bbe --- /dev/null +++ b/src/stores/index.js @@ -0,0 +1,27 @@ +// store/index.js +import Vue from 'vue' +import Vuex from 'vuex' + +Vue.use(Vuex) + +export default new Vuex.Store({ + state: { + user: null + }, + mutations: { + SET_USER(state, user) { + state.user = user; + // 同时保存到localStorage + if (user && user.token) { + localStorage.setItem('token', user.token); + } + }, + LOGOUT(state) { + state.user = null; + localStorage.removeItem('token'); + } + }, + getters: { + isLoggedIn: state => !!state.user + } +})