Nuxtjs,SSR解决服务端用户登录鉴权

Elysian
2022-01-07 / 0 评论 / 286 阅读 / 正在检测是否收录...

Nuxt.js是基于在Vue.js的服务端渲染框架,能完美的解决SEO的问题,但同时权限认证成为了一大痛点,需要解决用户登录后,保存token,来验证后续的权限的问题。
该处主要使用如下解决方法

  1. 使用 nuxt/axios/proxy 代理,使前端和后端的接口的域名统一,因为需要使前后端的cookie共用。
  2. 在登录的时候将登录信息的token和用户信息写入 cookie ,然后通过cookie传递给nuxtjs的服务端。
  3. 服务端在 store/index.js 中,构建actionsnuxtServerInit,然后通过context参数中的requestheaders拿到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

0

评论

博主关闭了所有页面的评论