Discussion on nuxtjs Verification Login Middleware and Mixing of mixin

middleware-authLogin. js

export default function ({ route, store, redirect, app, req, res }) {
 // store.state.auth.loggedIn  Log in or not 
 //  Permissions page checks login status 
 if (!store.state.auth.loggedIn) {
 store.commit('changeShowType', 'login'); //  Show the login box or jump to the login page 
 const query = {
  ...app.router.currentRoute.query
 };
 query.redirect = route.fullPath; //  Routing portability redirect Parameter 
 if (app.router.currentRoute.path === route.path) {
  return redirect('/');
 } else {
  return redirect(app.router.currentRoute.path, query);
 }
 }
};

mixin-authLogin. js

export default {
 methods: {
 authLogin (fn, v) {
  /**
   * fn  Function name 
   * v Parameter   Format  Object
   *  Login authentication before some methods are performed, and login without login 
   */
  if (this.$auth.loggedIn) {
  this[fn](v);
  } else {
  this.$store.commit('changeShowType', 'login');
  this.$store.commit('changeIsShowLoginRegist', true);
  //  Avoid redirect Infinite splicing of fields 
  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
   }
  });
  }
 }
 }
};

Additional knowledge: nuxt project configuration support for less, sass, stylus preprocessors

Guide reading

In the process of project development, when writing project style, many children's shoes like to use css preprocessor for convenient and quick development.

Therefore, it is very necessary for our project to support preprocessors.

In this chapter, our project adds support for three commonly used css preprocessor tools: stylus, less and sass;

We can go to official website to view the document: https://zh.nuxtjs.org/api/configuration-build/# styleresources

First we need to install style-resources:

cnpm install --save-dev @nuxtjs/style-resources

We will install the following as needed:

sass: cnpm install --save-dev sass-loader node-sass

less: cnpm install --save-dev less-loader less

stylus: cnpm install --save-dev stylus-loader stylus

Next, we need to modify the configuration inside nuxt. config. js, as follows:

export default {
 modules: [
 '@nuxtjs/style-resources',
 ],
 styleResources: {
 scss: './assets/variables.scss',
 less: './assets/**/*.less',
 // sass: ...  What you need to configure is global here 
 }
}

stylus

Next, we go into the testing phase, and we modify the style in index. vue as follows:

<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>

We reboot the service, open the browser, see if the style is working, well here, we see that the background of our project has turned red,

So our preprocessor has been configured;

Next, we need to configure the global function styl file.

(1) The simplest and most direct method is to directly introduce:

<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>

Remarks: If multiple files use such a file at the same time, it is quite tedious to introduce it every time;

So, we need a faster and simpler way;

(2) We encapsulated the following wh () method in a public assets/common. styl, and then we added the following in nuxt. config. js:

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

After saving, restart the service, and we will find that the style can still work; Therefore, the global public style sheet can be configured in this way;

less

Here, let's test whether less is effective. The editor is as follows:

<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>

Next, let's test the public file. We added the following in assets/common. less:

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

We delete the less definition inside the component, see if the background turns purple, and when we restart the service, we will find that the background turns purple.

Explain that our less file has been successfully introduced globally;

sass

Next, let's test sass. We edit it as follows:

<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>

Here, I will no longer test the two ways of global introduction, and interested children's shoes can try more; Ok, in our section, we have completed configuring three css preprocessors in the nuxt project.