nuxt 自定义 auth 中间件实现令牌的持久化
核心点就是在process.server下，把之前存在 cookie 中的数据再用store.commit一下
auth.js
1 | /* eslint-disable no-unused-vars */ |
2 | /* eslint-disable no-useless-return */ |
3 | |
4 | export const TokenKey = 'Admin-token' |
5 | |
6 | /** |
7 | * 解析服务端拿到的cookie |
8 | * @param {*} cookie |
9 | * @param {*} key |
10 | */ |
11 | export function getCookie(cookie, key) { |
12 | if (!cookie) return |
13 | const arrstr = cookie.split('; ') |
14 | for (let i = 0; i < arrstr.length; i++) { |
15 | const temp = arrstr[i].split('=') |
16 | |
17 | if (temp[0] === key) return unescape(temp[1]) |
18 | } |
19 | } |
20 | |
21 | // 登录页 |
22 | const loginPath = '/login' |
23 | // 首页 |
24 | const indexPath = '/home' |
25 | // 路由白名单，直接绕过路由守卫 |
26 | const whiteList = [loginPath] |
27 | |
28 | /** |
29 | * @description 鉴权中间件，用于校验登陆 |
30 | * |
31 | */ |
32 | export default async ({ store, redirect, env, route, req }) => { |
33 | const { path, fullPath, query } = route |
34 | const { redirect: redirectPath } = query |
35 | |
36 | // 应对刷新 vuex状态丢失的解决方案 |
37 | if (process.server) { |
38 | const cookie = req.headers.cookie |
39 | const token = getCookie(cookie, TokenKey) |
40 | |
41 | // 设置登录状态 |
42 | if (token) { |
43 | store.commit('LOGIN', token) //'LOGIN' 和store中的mutations对应起来就可以了 |
44 | } |
45 | |
46 | if (token) { |
47 | // 已经登录，进来的是登录页，且有重定向的路径，直接调跳到重定向的路径 |
48 | if (path === loginPath && path !== redirectPath) { |
49 | redirect(redirectPath) |
50 | } else if (path === '/') { |
51 | redirect(indexPath) |
52 | } else { |
53 | // 其他的已经登录过得直接跳过 |
54 | return |
55 | } |
56 | } else { |
57 | // 鉴权白名单 |
58 | if (whiteList.includes(path)) return |
59 | |
60 | // 未登录，进来的不是是登录页，全部重定向到登录页 |
61 | if (!path.includes(loginPath)) { |
62 | redirect(`${loginPath}?redirect=${encodeURIComponent(fullPath)}`) |
63 | } |
64 | } |
65 | } |
66 | } |
