在使用Nuxt.js框架中 无法像Vue中使用sessionStorage,LocalStorage将数据存储在本地。无法存储在本地就失去判断用户是否登录的条件,有什么办法能够判断用户是否登录了呢?
一. 安装需要的依赖
npm install js-cookie --save
二. 在登录页面 Login
1 | import Cookie from 'js-cookie' |
三. 添加权限中间件 与 需求文件
在middleware中新增auth.js文件
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
27import utils from '../utils/utils'
export default function ({ route, req, res, redirect }) {
let isClient = process.client;
let isServer = process.server;
let redirectURL = '/login';
var token, path
// console.log(req);
// console.log(isClient,isServer);
//在服务端
if (isServer) {
let cookies = utils.getcookiesInServer(req)
path = req.originalUrl;
token = cookies.token || ''
}
//在客户端判读是否需要登陆
if (isClient) {
token = utils.getcookiesInClient('token')
path = route.path;
}
if (path) {
redirectURL = '/login?ref=' + encodeURIComponent(path)
}
//需要进行权限判断的页面开头
if (!token) {
redirect(redirectURL)
}
}utils方法 在根目录添加新增 utils/utils.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17import Cookie from 'js-cookie'
export default {
//获取服务端cookie
getcookiesInServer:function (req) {
let service_cookie = {};
req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) {
let parts = val.split('=');
service_cookie[parts[0].trim()] = (parts[1] || '').trim();
});
return service_cookie;
},
//获取客户端cookie
getcookiesInClient: function (key) {
console.log(key);
return Cookie.get(key) ? Cookie.get(key) : ''
}
}
四. 如何使用
- 在需要的权限的页面添加
1
middleware: 'auth'