Nuxt.js是基于在Vue.js的服务端渲染框架,能完美的解决SEO的问题,但同时权限认证成为了一大痛点,需要解决用户登录后,保存token,来验证后续的权限的问题。
该处主要使用如下解决方法
- 使用
nuxt/axios/proxy
代理,使前端和后端的接口的域名统一,因为需要使前后端的cookie共用。 - 在登录的时候将登录信息的
token
和用户信息写入cookie
,然后通过cookie
传递给nuxtjs
的服务端。 - 服务端在
store/index.js
中,构建actions
的nuxtServerInit
,然后通过context
参数中的request
的headers
拿到cookie
中的登录信息。
这样就可以实现nuxt的服务端用户信息。
具体的部分核心代码提供如下,可以做下参考:store/index.js
const store = new Vuex.Store({
modules,
actions: {
nuxtServerInit({ commit }, { req }) {
let cookie = req.headers.cookie || "";
if (cookie.indexOf("token") > -1) {
let token = "";
try {
token = cookie.split(';').map(a => {
var arr = a.split('=');
return { key: arr[0], value: arr[1] };
}).filter(a => a.key === 'token')[0].value;
} catch (e) {
}
if (token) {
ajax.defaults.headers["token"] = token;
}
}
}
}
})
export default () => store
登录逻辑
async loginIn() {
if (!this.phone) {
Toast("请输入验证码");
return;
}
const data = await this.$api.requestLoginInApi(this.phone, this.code);
if (data.status === 0) {
Toast(data.msg);
return;
}
ajax.defaults.headers["token"] = data.token;
window.localStorage.setItem("token", data.token);
window.localStorage.setItem("userinfo", JSON.stringify(data.user));
document.cookie = "token=" + data.token;
Toast("登陆成功");
this.onClose();
}
以上代码中的ajax使用的是axios
评论