快捷導(dǎo)航

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

更新時(shí)間：2020年11月06日 09:51:57 作者：強(qiáng)身健體，清神醒腦

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

middleware — authLogin.js

export default function ({ route, store, redirect, app, req, res }) {
 // store.state.auth.loggedIn 是否登錄
 // 權(quán)限頁(yè)面檢查登錄狀態(tài)
 if (!store.state.auth.loggedIn) {
 store.commit('changeShowType', 'login'); // 展示登錄框或者可以跳轉(zhuǎn)登錄頁(yè)
 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í)行某些方法之前的登錄鑒定，沒(méi)有登陸則登錄
   */
  if (this.$auth.loggedIn) {
  this[fn](v);
  } else {
  this.$store.commit('changeShowType', 'login');
  this.$store.commit('changeIsShowLoginRegist', true);
  // 避免redirect字段無(wú)限拼接
  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
   }
  });
  }
 }
 }
};

補(bǔ)充知識(shí)：nuxt 項(xiàng)目配置對(duì) less、sass、stylus 預(yù)處理器的支持

導(dǎo)讀

在項(xiàng)目開(kāi)發(fā)的過(guò)程中呢，在編寫(xiě)項(xiàng)目樣式的時(shí)候，很多童鞋喜歡使用css預(yù)處理器進(jìn)行方便快捷的開(kāi)發(fā)，

所以說(shuō)，讓我們的項(xiàng)目支持預(yù)處理器是非常有必要的；

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

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

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

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

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

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

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

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

stylus

接下來(lái)，我們進(jìn)入測(cè)試階段，我們修改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>

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

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

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

（1）最簡(jiǎn)單最直接的方法，就是直接引入：

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

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

所以呢，我們需要更加快捷簡(jiǎn)單的方式；

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

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

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

less

這里呢，我們?cè)賮?lái)測(cè)試下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>

接下來(lái)，我們就來(lái)測(cè)試公共文件，我們?cè)赼ssets/common.less中新增如下：

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

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

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

sass

接下來(lái)我們來(lái)測(cè)試下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>

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

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

您可能感興趣的文章: