开发问题记录

[nitroge]

开发问题记录

nuxt项目实现登录认证

// 安装cookie-universal-nuxt插件
npm i cookie-universal-nuxt

// store/auth.js
const state = () =>({
  token: "",
  userInfo: {},
})
const mutations = {
  setToken(state, token) {
    state.token = token;
    this.$cookies.set("token", token, { path:"/", maxAge: 24*60*60*1000 })
  }
}
const actions = {
  nuxtServerInit({ state, commit }) {
    const token = this.$cookies.get("token");
    if (!state.token && token) {
      commit("setToken", token)
    }
  }
}

//middleware/auth.js
export default function({ app }) {
  const { token, userInfo } = app.store.state;

  // 获取用户信息
  if (token && Object.keys(userInfo).length === 0) {
    app.store.dispatch("getUserInfo")
  }
} 

nuxt项目重定向用户请求到另一个路由（context上下文对象）

// middleware/redirect.js
export default function ( { app, route, redirect } ) {
  if (!app.store.state.token) {
    const needLoginPages = [/\/account/, /\/cart/];
    const needLogin= needLoginPages.some((item) => item.test(route.path));
    if (needLogin) {
      redirect("/login")
    }
  }
}

flex布局最后一行左对齐（让flex最后一行列表左对齐的N种方法）

/*一行固定5个元素*/
.box {
  display: flex;
  flex-wrap: wrap
}
.box-item{
  width: 19%;
}
.box-item:not(:nth-child(5n)) {
  margin-right: calc(5% / 4)
}