浅谈nuxtjs校验登录中间件和混入(mixin)

export default function ({ route, store, redirect, app, req, res }) {
 // store.state.auth.loggedIn 是否登录
 // 权限页面检查登录状态
 if (!store.state.auth.loggedIn) {
 store.commit('changeShowType', 'login'); // 展示登录框或者可以跳转登录页
 const query = {
  ...app.router.currentRoute.query
 };
 query.redirect = route.fullPath; // 路由携带redirect参数
 if (app.router.currentRoute.path === route.path) {
  return redirect('/');
 } else {
  return redirect(app.router.currentRoute.path, query);
 }
 }
};

export default {
 methods: {
 authLogin (fn, v) {
  /**
   * fn 函数名称
   * v参数 格式 Object
   * 执行某些方法之前的登录鉴定，没有登陆则登录
   */
  if (this.$auth.loggedIn) {
  this[fn](v);
  } else {
  this.$store.commit('changeShowType', 'login');
  this.$store.commit('changeIsShowLoginRegist', true);
  // 避免redirect字段无限拼接
  let queryStr = '';
  const query = this.$route.query;
  delete query.redirect;
  Object.keys(query).forEach((key) => {
   const str = key + '=' + this.$route.query[key] + '&';
   queryStr += str;
  });
  queryStr = queryStr.slice(0, -1);
  this.$router.replace({
   path: this.$route.path,
   query: {
   ...query,
   redirect: this.$route.path + '?' + queryStr
   }
  });
  }
 }
 }
};

export default {
 modules: [
 '@nuxtjs/style-resources',
 ],
 styleResources: {
 scss: './assets/variables.scss',
 less: './assets/**/*.less',
 // sass: ... 需要什么配置什么，这里是全局的
 }
}

<style scoped lang="stylus">
 wh($w = 100%, $h = 100%){
 width:$w; height:$h;background-color:red;
 }
 .content-page {
 margin: 0;
 wh()
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

<style scoped lang="stylus">

 @import "~assets/common.styl"

 .content-page {
 margin: 0;
 wh()
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

styleResources: {
 stylus: '~/assets/common.styl',
 // sass: ...
},

<style scoped lang="less">

 @color:pink;
 .bg{
 width:100%;height:100%;background-color: @color;
 }

 .content-page {
 margin: 0;
 .bg;
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>

@color:purple;
.bg{
 width:100%;height:100%;background-color: @color;
}

<style scoped lang="scss">

 $color:yellow;
 @mixin block{
 width:100%;height:100;background-color:$color;
 }

 .content-page {
 margin: 0;
 @include block;
 }
 .index-title{
 height: 80px; line-height: 80px;
 }
 .card-info{
 width: 92%; margin: 0 auto; margin-bottom: 30px;
 }
 .spinner-box{
 display: block; margin: 0 auto; margin-top: 50px;
 }
</style>