diff --git a/rc_autoplc_front/src/router/index.ts b/rc_autoplc_front/src/router/index.ts index e1aefe7..45c7ed0 100644 --- a/rc_autoplc_front/src/router/index.ts +++ b/rc_autoplc_front/src/router/index.ts @@ -1,11 +1,20 @@ import { createRouter, createWebHistory } from 'vue-router' +import { useAuthStore } from '@/stores/auth' +import { ElMessage } from 'element-plus' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ + { + path: '/login', + name: 'login', + component: () => import('../views/Login.vue'), + meta: { requiresAuth: false }, + }, { path: '/', component: () => import('../views/Layout.vue'), + meta: { requiresAuth: true }, children: [ { path: '/user', @@ -73,14 +82,32 @@ const router = createRouter({ }) // 添加全局路由守卫 -// router.beforeEach((to, from, next) => { -// const token = localStorage.getItem('token') +router.beforeEach((to, from, next) => { + const authStore = useAuthStore() + const token = authStore.getToken() -// if (to.path !== '/login' && !token) { -// next('/login') -// } else { -// next() -// } -// }) + // 如果访问登录页 + if (to.path === '/login') { + // 已登录状态下访问登录页,自动跳转到首页 + if (token) { + next('/') + ElMessage.success('已登录,自动跳转') + } else { + // 未登录,正常进入登录页 + next() + } + return + } + + // 访问需要认证的页面,但未登录(无token) + if (to.meta.requiresAuth && !token) { + ElMessage.warning('请先登录') + next('/login') + return + } + + // 已登录且访问合法页面,正常放行 + next() +}) export default router diff --git a/rc_autoplc_front/src/utils/request.ts b/rc_autoplc_front/src/utils/request.ts index 8dcb4f3..9a43f42 100644 --- a/rc_autoplc_front/src/utils/request.ts +++ b/rc_autoplc_front/src/utils/request.ts @@ -30,8 +30,19 @@ const TokenManager = { // 删除默认请求头 delete request.defaults.headers.common['Authorization'] }, + + // 初始化token(应用启动时调用) + initToken() { + const token = this.getToken() + if (token) { + request.defaults.headers.common['Authorization'] = `Bearer ${token}` + } + }, } +// 应用启动时初始化token +TokenManager.initToken() + // 请求拦截器 request.interceptors.request.use( (config: InternalAxiosRequestConfig) => { @@ -77,6 +88,16 @@ request.interceptors.response.use( return data }, (error) => { + // 处理401未授权错误 + if (error.response?.status === 401) { + // 清除token + TokenManager.removeToken() + // 跳转到登录页 + ElMessage.error('登录已过期,请重新登录') + router.replace('/login') + return Promise.reject(error) + } + // 网络错误或其他错误 ElMessage.error( error.response?.data?.message || diff --git a/rc_autoplc_front/src/views/Layout.vue b/rc_autoplc_front/src/views/Layout.vue index e6c95b0..97ea15c 100644 --- a/rc_autoplc_front/src/views/Layout.vue +++ b/rc_autoplc_front/src/views/Layout.vue @@ -158,8 +158,8 @@ const handleCommand = (command: string) => { authStore.removeToken() localStorage.removeItem('username') ElMessage.success('退出成功') - // 跳转到登录页(如果有登录页) - // router.push('/login') + // 跳转到登录页 + router.push('/login') }) .catch(() => {}) } diff --git a/rc_autoplc_front/src/views/Login.vue b/rc_autoplc_front/src/views/Login.vue new file mode 100644 index 0000000..32cd015 --- /dev/null +++ b/rc_autoplc_front/src/views/Login.vue @@ -0,0 +1,317 @@ + + + + +