登錄注冊鑒權(quán)

vuex

在store的modules 中新建user.js

import AUTH from '@/apis/Auth'

// 相當(dāng)于data里面的數(shù)據(jù)
const state = {
  userData: {},

}
// 相當(dāng)于computed
const getters = {
  userName: state=> state.userData.userName || '未',
  isLogin: state=> state.userData.isLogin
}

const mutations = {
  setUserData(state,payload){
    state.userData = payload.userData
  }
}

const actions = {
  getUserInfo({commit}) {
    return AUTH.getInfo()
      .then(res=>{
        commit('setUserData',{userData: res})
      })
  },
  logout({commit}) {
    return AUTH.logout()
      .then(res=>{
        commit('setUserData',{userData: {}})
      })
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

在login.vue中

onLogin(name) {
      this.$refs[name].validate((valid) => {
            if (valid) {
              Auth.login(this.loginForm).then(
                res=>{
                // 獲取用戶信息
                this.$store.dispatch('getUserInfo').then(response=>{
                  this.$refs[name].resetFields()
                   this.$router.push('/notebooks')
                   this.$Message.success({
                      content: `${res.data.username},歡迎您使用印象筆記`,
                      duration: 6
                  })
                })
                }
              ).catch(err=>{
                  this.$Message.error(err.msg)
              })
            } else {
                return
            }
          })
    },

登錄鑒權(quán)的常用方法

登錄鑒權(quán)目前主要有兩種方法，一種是使用beforeEach方法，另一種是在axios響應(yīng)攔截里面獲取登錄狀態(tài)

beforeEach鑒權(quán)

缺點：
1、依賴全局?jǐn)?shù)據(jù)，處理起來麻煩
2、為了解決vuex刷新失敗問題，需要在全局組件設(shè)置
3、如果身份過期，無法同步更新

在main.js中

// 注意這里beforeEach必須寫在掛載實例之前否則刷新頁面或者在地址欄直接輸入地址不會執(zhí)行
router.beforeEach((to,from,next)=>{
  if(!store.getters.isLogin && to.path!=='/login'){
    router.push('/login')
  }else{
    next()
  }
})

axios響應(yīng)攔截鑒權(quán)

// 4.響應(yīng)攔截
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      console.log(error.response.data.data[0])
      Message.error(error.response.data.data[0])
      route.push('/login');
      return
    } else {
      Message.error('系統(tǒng)錯誤');
    }
    return Promise.reject(error);
  }
);

項目發(fā)布上線

發(fā)布到 Githubpages

我們完成項目后，可以執(zhí)行 npm run build 生成可編譯后的代碼，代碼在 dist 目錄下。下一步需要做的事就是把 dist 目錄下的文件推送到 github 上。

第一步創(chuàng)建項目

在 github 上建立項目如 hellonote，拷貝項目地址 如:xxx

第二步設(shè)置自動化上傳腳本

修改 pacakage.json, 加入如下 script

  "scripts": {
    "upload": "cd dist; git init; git remote remove origin; git remote add origin xxx.git; git add . ; git commit -m '打包發(fā)布上線' ;git push -f origin master && exit 0"
  },

或者在命令行

cd dist
git init
git remote remove origin
git remote add origin xxx.git // 倉庫ssh鏈接
git pull  // 如果這一步不行,走下面三條命令
---
git fetch
git reset
git pull
---
git add ./
git commit -m 'publish'
git push

第三步

終端下執(zhí)行

npm run build
npm run upload

上傳后，我們在 github 當(dāng)前項目的設(shè)置里設(shè)置 githubpages

gitpage.png

之后，我們就能點擊上圖生成的鏈接預(yù)覽網(wǎng)站了

但是

出現(xiàn)了報錯，檢查元素一看，資源全是404。原因是配置打包時靜態(tài)資源路徑的問題。

因為我們讓 js 打包在 html 里的路徑是/assets 開頭，而 githubpages 是有二級路徑的，以/assets 開頭實際上是加載的資源，路徑明顯不對。 所以，我們需要修改 webpack 打包的配置。

image.png

再次 build 并 upload ，可以正常打開了。