09-2 项目完善.md

登录注册鉴权

vuex

在store的modules 中新建user.js

import AUTH from '@/apis/Auth'

// 相当于data里面的数据
const state = {
  userData: {},

}
// 相当于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
            }
          })
    },

登录鉴权的常用方法

登录鉴权目前主要有两种方法，一种是使用beforeEach方法，另一种是在axios响应拦截里面获取登录状态

beforeEach鉴权

缺点：
1、依赖全局数据，处理起来麻烦
2、为了解决vuex刷新失败问题，需要在全局组件设置
3、如果身份过期，无法同步更新

在main.js中

// 注意这里beforeEach必须写在挂载实例之前否则刷新页面或者在地址栏直接输入地址不会执行
router.beforeEach((to,from,next)=>{
  if(!store.getters.isLogin && to.path!=='/login'){
    router.push('/login')
  }else{
    next()
  }
})

axios响应拦截鉴权

// 4.响应拦截
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('系统错误');
    }
    return Promise.reject(error);
  }
);

项目发布上线

发布到 Githubpages

我们完成项目后，可以执行 npm run build 生成可编译后的代码，代码在 dist 目录下。下一步需要做的事就是把 dist 目录下的文件推送到 github 上。

第一步创建项目

在 github 上建立项目如 hellonote，拷贝项目地址如:xxx

第二步设置自动化上传脚本

修改 pacakage.json, 加入如下 script

  "scripts": {
    "upload": "cd dist; git init; git remote remove origin; git remote add origin xxx.git; git add . ; git commit -m '打包发布上线' ;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

第三步

终端下执行

npm run build
npm run upload

上传后，我们在 github 当前项目的设置里设置 githubpages

gitpage.png

之后，我们就能点击上图生成的链接预览网站了

但是

出现了报错，检查元素一看，资源全是404。原因是配置打包时静态资源路径的问题。

因为我们让 js 打包在 html 里的路径是/assets 开头，而 githubpages 是有二级路径的，以/assets 开头实际上是加载的资源，路径明显不对。所以，我们需要修改 webpack 打包的配置。

image.png

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