淺談nuxtjs校驗登錄中間件和混入(mixin)

更新時間：2020年11月06日 09:51:57 作者：強身健體，清神醒腦

這篇文章主要介紹了淺談nuxtjs校驗登錄中間件和混入(mixin)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

middleware — authLogin.js

export default function ({ route, store, redirect, app, req, res }) {
 // store.state.auth.loggedIn 是否登錄
 // 權限頁面檢查登錄狀態(tài)
 if (!store.state.auth.loggedIn) {
 store.commit('changeShowType', 'login'); // 展示登錄框或者可以跳轉(zhuǎn)登錄頁
 const query = {
  ...app.router.currentRoute.query
 };
 query.redirect = route.fullPath; // 路由攜帶redirect參數(shù)
 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 函數(shù)名稱
   * v參數(shù) 格式 Object
   * 執(zhí)行某些方法之前的登錄鑒定，沒有登陸則登錄
   */
  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
   }
  });
  }
 }
 }
};

補充知識：nuxt 項目配置對 less、sass、stylus 預處理器的支持

導讀

在項目開發(fā)的過程中呢，在編寫項目樣式的時候，很多童鞋喜歡使用css預處理器進行方便快捷的開發(fā)，

所以說，讓我們的項目支持預處理器是非常有必要的；

這章節(jié)呢，我們項目新增對 stylus、less、sass 這三款比較常用的css預處理器工具的支持；

我們可以去到官網(wǎng)查看文檔：https://zh.nuxtjs.org/api/configuration-build/#styleresources

首先我們需要安裝 style-resources：

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

我們根據(jù)需要，會安裝如下：

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

接下來我們需要修改nuxt.config.js里面的配置，如下：

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

stylus

接下來，我們進入測試階段，我們修改index.vue里面的樣式如下：

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

我們重新啟動服務，打開瀏覽器，觀察樣式是否有生效，好這里呢，我們看到我們的項目背景已經(jīng)變成紅色了，

所以我們預處理器已經(jīng)配置好了；

接下來，我們就需要配置全局的函數(shù)styl文件，

（1）最簡單最直接的方法，就是直接引入：

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

備注：如果處于多個文件同時使用這樣一個文件的時候，每次都需要這樣引入，是相當繁瑣的一件事情；

所以呢，我們需要更加快捷簡單的方式；

（2）我們把下面的wh()方法封裝在一個公共的assets/common.styl之中，然后呢，我們在nuxt.config.js中新增如下：

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

保存之后，重新啟動服務，我們會發(fā)現(xiàn)，樣式依舊可以起作用；所以呢，全局公共的樣式表，是可以這樣配置的；

less

這里呢，我們再來測試下less是否生效，編輯如下：

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

接下來，我們就來測試公共文件，我們在assets/common.less中新增如下：

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

我們把組件內(nèi)部的less定義給刪除掉，觀察這個背景是否變成紫色，我們重啟服務，會發(fā)現(xiàn)這個背景會變成紫色，

說明我們的less文件已經(jīng)全局引入成功了；

sass

接下來我們來測試下sass ，我們編輯如下：

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

這里呢，我就不再測試全局引入的兩種方式了，有興趣的童鞋們呢可以多去嘗試嘗試；好，我們這章節(jié)內(nèi)容呢，在nuxt項目中配置3種css預處理器已經(jīng)完成了。

以上這篇淺談nuxtjs校驗登錄中間件和混入(mixin)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: