1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// 登录成功后保存 token
localStorage.setItem('token', response.data.token)

// 请求时携带 token（通过 Axios 拦截器）
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 登出时清除 token
localStorage.removeItem('token')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// CountDown.vue - 倒计时按钮组件
import { ref } from 'vue'

export default {
  setup() {
    const countDown = ref(0)  // 倒计时秒数
    const isCounting = ref(false)
    let timer: number | null = null

    const sendCode = async () => {
      if (isCounting.value) return

      // 调用发送验证码接口
      await api.sendSms(phone.value)

      // 开始倒计时
      isCounting.value = true
      countDown.value = 60

      timer = window.setInterval(() => {
        countDown.value--
        if (countDown.value <= 0) {
          isCounting.value = false
          if (timer) clearInterval(timer)
        }
      }, 1000)
    }

    return { countDown, isCounting, sendCode }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

// token 管理模块 - token.ts
import axios from 'axios'

// 保存 token
export const saveTokens = (accessToken: string, refreshToken: string) => {
  localStorage.setItem('access_token', accessToken)
  localStorage.setItem('refresh_token', refreshToken)
}

// 获取 access token
export const getAccessToken = () => localStorage.getItem('access_token')

// 刷新 token
export const refreshToken = async () => {
  const refreshToken = localStorage.getItem('refresh_token')
  if (!refreshToken) {
    throw new Error('没有 refresh token，需要重新登录')
  }

  const response = await axios.post('/api/auth/refresh', { refreshToken })
  const { accessToken, refreshToken: newRefreshToken } = response.data

  // 保存新 token（通常 refresh token 也会更新）
  saveTokens(accessToken, newRefreshToken)

  return accessToken
}

// Axios 拦截器 - 自动处理 token 刷新
let isRefreshing = false  // 防止多个请求同时触发刷新
let requestQueue: Array<(token: string) => void> = []  // 等待 token 的请求队列

axios.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config

    // 如果是 401（未授权）且不是刷新 token 的请求
    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // 如果正在刷新，把请求加入队列，等刷新完成后再执行
        return new Promise(resolve => {
          requestQueue.push((token: string) => {
            originalRequest.headers.Authorization = `Bearer ${token}`
            resolve(axios(originalRequest))
          })
        })
      }

      originalRequest._retry = true
      isRefreshing = true

      try {
        const newToken = await refreshToken()

        // 刷新成功后，依次处理队列中的请求
        requestQueue.forEach(callback => callback(newToken))
        requestQueue = []

        // 重试当前请求
        originalRequest.headers.Authorization = `Bearer ${newToken}`
        return axios(originalRequest)
      } catch (refreshError) {
        // 刷新失败，跳转到登录页
        window.location.href = '/login'
        return Promise.reject(refreshError)
      } finally {
        isRefreshing = false
      }
    }

    return Promise.reject(error)
  }
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 在路由守卫或 Axios 拦截器中
if (error.response?.status === 401) {
  // 清除本地 token
  localStorage.removeItem('access_token')
  localStorage.removeItem('refresh_token')

  // 跳转到登录页，带上当前路径，登录成功后可以跳回来
  const currentPath = window.location.pathname
  window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

// 路由配置元信息 - 用来标记哪些路由需要权限
const routes = [
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresAuth: false }  // 不需要登录
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }  // 需要登录
  },
  {
    path: '/users',
    name: 'UserList',
    component: () => import('@/views/users/List.vue'),
    meta: {
      requiresAuth: true,
      permission: 'user:list'  // 需要 user:list 权限
    }
  },
  {
    path: '/users/create',
    name: 'UserCreate',
    component: () => import('@/views/users/Create.vue'),
    meta: {
      requiresAuth: true,
      permission: 'user:create'  // 需要 user:create 权限
    }
  },
  {
    path: '/roles',
    name: 'RoleList',
    component: () => import('@/views/roles/List.vue'),
    meta: {
      requiresAuth: true,
      permission: 'role:list'
    }
  },
  {
    path: '/settings',
    name: 'Settings',
    component: () => import('@/views/Settings.vue'),
    meta: {
      requiresAuth: true,
      permission: 'system:settings'
    }
  },
  // 404
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

// router/permission.ts
import router from './index'
import { getAccessToken } from '@/utils/token'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

// 权限白名单 - 不需要登录就能访问的页面
const whiteList = ['/login', '/register', '/forgot-password']

// 动态生成可访问路由（根据用户权限过滤）
const generateAccessibleRoutes = (userPermissions: string[]) => {
  const allRoutes = getAllRoutes()  // 这里从路由配置里取出所有带 permission 的路由

  return allRoutes.filter(route => {
    // 如果路由没有 permission 字段，说明不需要特殊权限，只要有登录就行
    if (!route.meta?.permission) return true

    // 检查用户权限列表中是否包含该路由需要的权限
    return userPermissions.includes(route.meta.permission)
  })
}

// 获取所有需要权限的路由（实际项目中可以从路由配置文件里提取）
const getAllRoutes = () => {
  const mainRoutes = router.getRoutes()
  return mainRoutes.filter(r => r.meta?.requiresAuth)
}

// 路由守卫
router.beforeEach(async (to, from, next) => {
  const hasToken = getAccessToken()
  const userStore = useUserStore()

  if (hasToken) {
    // 已登录
    if (to.path === '/login') {
      // 已登录还访问登录页，跳转到首页
      next({ path: '/' })
    } else {
      // 检查是否有用户信息
      const hasUserInfo = userStore.userInfo && Object.keys(userStore.userInfo).length > 0

      if (hasUserInfo) {
        // 有用户信息，检查权限
        if (to.meta?.permission) {
          // 该页面需要特定权限
          const hasPermission = userStore.permissions.includes(to.meta.permission)
          if (hasPermission) {
            next()
          } else {
            // 没有权限，跳转到 403 页面
            next({ path: '/403', replace: true })
          }
        } else {
          // 不需要特定权限，直接放行
          next()
        }
      } else {
        // 没有用户信息，说明刷新后状态丢了，需要重新获取
        try {
          await userStore.getUserInfo()
          // 重新触发路由守卫，让守卫重新判断（hack 方式）
          next({ ...to, replace: true })
        } catch (error) {
          // 获取用户信息失败，Token 可能过期
          console.error('获取用户信息失败:', error)
          // 清除 Token，跳转登录
          userStore.logout()
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    // 未登录
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 跳转登录页
      next(`/login?redirect=${to.path}`)
    }
  }
})

export default router

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

// stores/user.ts
import { defineStore } from 'pinia'
import { getAccessToken, removeTokens } from '@/utils/token'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null as any,
    permissions: [] as string[]
  }),

  actions: {
    // 从本地存储恢复用户信息（页面刷新后调用）
    restoreFromStorage() {
      const storedUserInfo = localStorage.getItem('user_info')
      const storedPermissions = localStorage.getItem('user_permissions')

      if (storedUserInfo) {
        this.userInfo = JSON.parse(storedUserInfo)
      }
      if (storedPermissions) {
        this.permissions = JSON.parse(storedPermissions)
      }
    },

    async getUserInfo() {
      const response = await axios.get('/api/user/info')
      this.userInfo = response.data.userInfo
      this.permissions = response.data.permissions

      // 存入本地存储，作为状态丢失后的备份
      localStorage.setItem('user_info', JSON.stringify(this.userInfo))
      localStorage.setItem('user_permissions', JSON.stringify(this.permissions))
    },

    logout() {
      this.userInfo = null
      this.permissions = []
      removeTokens()
      localStorage.removeItem('user_info')
      localStorage.removeItem('user_permissions')
    }
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// main.ts - 应用入口
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import { useUserStore } from './stores/user'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)

// 恢复用户状态（放在 router 安装之后，app.mount 之前）
const userStore = useUserStore()
if (getAccessToken()) {
  userStore.restoreFromStorage()
}

app.mount('#app')

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// directives/permission.ts
import type { Directive, DirectiveBinding } from 'vue'
import { useUserStore } from '@/stores/user'

// 按钮权限指令 v-permission="'user:delete'"
const permissionDirective: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const userStore = useUserStore()
    const requiredPermission = binding.value  // 比如 'user:delete'

    // 如果没有传入权限要求，或者用户有该权限，则不处理
    if (!requiredPermission) return

    // 检查用户权限列表
    if (!userStore.permissions.includes(requiredPermission)) {
      // 没有权限，移除这个按钮
      el.parentNode?.removeChild(el)
    }
  }
}

// 批量注册指令
export const registerDirectives = (app: any) => {
  app.directive('permission', permissionDirective)
}

// 或者单独导出
export { permissionDirective as vPermission }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<template>
  <div class="user-list">
    <!-- 有 user:create 权限才显示新增按钮 -->
    <el-button v-permission="'user:create'" type="primary" @click="handleCreate">
      新增用户
    </el-button>

    <!-- 有 user:delete 权限才显示删除按钮 -->
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            v-permission="'user:edit'"
            size="small"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            v-permission="'user:delete'"
            size="small"
            type="danger"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { vPermission } from '@/directives/permission'

// 指令注册（如果没在 main.ts 里全局注册的话）
// 局部注册的方式
// const vPermission = computed(() => { ... })  // 这个不行，需要 directive
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// directives/permission.ts
interface PermissionValue {
  type: 'or' | 'and'
  value: string[]
}

// v-permission-or="['user:create', 'system:admin']"  -- 拥有任意一个即可
// v-permission-and="['user:read', 'user:write']"      -- 必须同时拥有

const permissionDirective: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const userStore = useUserStore()

    // 支持两种写法：字符串 'user:delete' 或对象 { type: 'or', value: ['user:create', 'admin'] }
    let requiredPermissions: string[] = []
    let logicType: 'or' | 'and' = 'or'

    if (typeof binding.value === 'string') {
      requiredPermissions = [binding.value]
    } else if (binding.value && typeof binding.value === 'object') {
      requiredPermissions = binding.value.value
      logicType = binding.value.type || 'or'
    }

    if (requiredPermissions.length === 0) return

    let hasPermission = false
    if (logicType === 'or') {
      // OR: 有任意一个权限就行
      hasPermission = requiredPermissions.some(p => userStore.permissions.includes(p))
    } else {
      // AND: 必须拥有所有权限
      hasPermission = requiredPermissions.every(p => userStore.permissions.includes(p))
    }

    if (!hasPermission) {
      el.parentNode?.removeChild(el)
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// stores/user.ts
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null as any,
    roles: [] as string[],       // 角色标识列表，如 ['admin', 'editor']
    permissions: [] as string[]  // 权限标识列表，如 ['user:create', 'user:delete']
  }),

  getters: {
    // 判断是否有某个角色
    hasRole: (state) => (role: string) => state.roles.includes(role),

    // 判断是否有某个权限
    hasPermission: (state) => (permission: string) => state.permissions.includes(permission),

    // 是否是超级管理员
    isAdmin: (state) => state.roles.includes('admin'),

    // 是否是普通用户
    isNormalUser: (state) => !state.roles.some(r => ['admin', 'editor'].includes(r))
  },

  actions: {
    // 获取用户信息（包含角色和权限）
    async getUserInfo() {
      const response = await axios.get('/api/user/info')
      this.userInfo = response.data.userInfo
      this.roles = response.data.roles.map((r: any) => r.code)
      this.permissions = response.data.permissions.map((p: any) => p.code)

      localStorage.setItem('user_info', JSON.stringify(this.userInfo))
      localStorage.setItem('user_roles', JSON.stringify(this.roles))
      localStorage.setItem('user_permissions', JSON.stringify(this.permissions))
    }
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
  <div class="dashboard">
    <h1>控制台</h1>

    <!-- 管理员专属内容 -->
    <div v-if="userStore.isAdmin" class="admin-panel">
      <h2>管理员面板</h2>
      <p>欢迎，管理员大人！这里可以看到系统全貌。</p>
    </div>

    <!-- 编辑者专属内容 -->
    <div v-if="userStore.hasRole('editor')" class="editor-panel">
      <h2>内容管理</h2>
      <p>你可以编辑文章和管理草稿。</p>
    </div>

    <!-- 所有登录用户可见 -->
    <div class="common-panel">
      <h2>我的工作台</h2>
      <p>这是你的个人工作区。</p>
    </div>

    <!-- 权限按钮 -->
    <el-button
      v-if="userStore.hasPermission('system:config')"
      @click="showConfigDialog = true"
    >
      系统配置
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo, roles, permissions } = storeToRefs(userStore)
</script>