vue pc商城项目 ----------登录

目录

 注册登录

注册---------通过数据库存储用户信息（名字，密码）

登录过后首页用户信息进行展示

退出登录

导航守卫

全局守卫

路由独享守卫

组件内守卫

---

 注册登录

注册---------通过数据库存储用户信息（名字，密码）

登录---------登录成功的时候，后台为了区分这个用户是谁，服务器下发token【令牌唯一表示】
前台持久化存储token【带着token找服务器要用户信息进行展示】

vuex 不是持久化存储

网络请求

//登录
const reqLogin = (data) => {
  return axios.post('/api/user/passport/login', data)
}
//获取用户信息
const reqUserInfo = () => {
  return axios.get('/api/user/passport/auth/getUserInfo')
}
//退出登录
const reqlogoOut = () => {
  return axios.get('/api/user/passport/logout')
}

登录事件

   async userLogin() {
        try {
          const {
            phone,
            password
          } = this;
          (phone && password) && await this.$store.dispatch('AsyncLogin', {
            phone,
            password
          })
          this.$router.push('/Home')
        } catch (e) {
          console.log(e.message);
        }

vuex

import axios from '@/api'
// user 组件的小仓库
const state = {
  code: '',
  token: localStorage.getItem('Token'),
  userinfo: ''
}
const mutations = {
  userLogin(state, payload) {
    state.token = payload
  },
  GetUserInfo(state, payload) {
    state.userinfo = payload
  },
  CLEAR(state) {
    state.token = ''
    state.userinfo = ''
    localStorage.removeItem('Token')
  }
}
const actions = {
  async AsyncLogin({
    commit
  }, data) {
    let result = await axios.reqLogin(data)
    console.log(result);
    if (result.code == 200) {
      commit('userLogin', result.data.token)
      localStorage.setItem('Token', result.data.token)
      return 'ok'
    } else {
      return Promise.reject(new Error('false'))
    }
  },
  async asyncUserInfo({
    commit
  }) {
    let result = await axios.reqUserInfo()
    console.log(result);
    if (result.code == 200) {
      commit('GetUserInfo', result.data)
      return 'ok'
    } else {
      return Promise.reject(new Error('false'))
    }
  },
  async asyncUserOut({
    commit
  }) {
    let result = await axios.reqlogoOut()
    if (result.code == 200) {
      commit('CLEAR')
      return 'ok'
    } else {
      return Promise.reject(new Error('false'))
    }
  }
}
const getters = {}
export default {
  state,
  mutations,
  actions,
  getters
}

 

登录过后首页用户信息进行展示

当用户注册完成，用户登录【用户名+密码】向服务器发请求（组件派发 AsyncLogin）

登录成功后获取token，存储与仓库当中（非持久化存储），路由跳转到home

在首页当中（mounted）中派发 action  asyncUserInfo 动态展示用户信息

持久化存储token

退出登录

清除 后台token 用户信息 本地token

跳转到home

  async logoOut(){
      //退出登录发送请求 清楚token 用户信息
      try{
        await this.$store.dispatch('asyncUserOut')
        this.$router.push('/Home')
      }catch(e){
        //TODO handle the exception
        e.message
      }
    },

导航守卫

导航：表示路由正在发生变化

守卫：紫禁城的护卫

全局守卫

举例子：紫禁城【皇帝，太后，妃子】紫禁城大门守卫都要排查

只要发生路由变化，守卫就能监听到

router.beforeEach( (to, from, next) => {}）)

  //to:可以获取到你要跳转到哪个路由信息
  // from：:可以获取到你从哪个路由来的信息
  // next ： 放行函数 可以放行到指定的路由

可以做token过期处理 控制路由跳转

router里可以单独引入仓库import store from '@/store'

// 配置路由的地方
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router'
import store from '@/store'
//使用插件
Vue.use(VueRouter)
let router = new VueRouter({
  routes,
});
// 全局守卫,前置守卫 在路由跳转之前进行判断
router.beforeEach(async (to, from, next) => {
  //to:可以获取到你要跳转到哪个路由信息
  // from：:可以获取到你从哪个路由来的信息
  // next ： 放行函数 可以放行到指定的路由
  let token = store.state.user.token
  let name = store.state.user.userinfo.name;
  if (token) {
    //用户已经登录了,去login(不让去，停留在首页)
    if (to.path == '/login') {
      next('/')
    } else {
      // 登录去的不是login，
      if (name) {
        next()
      } else {
        // 没有用户信息。派发action ，让仓库存储用户信息 进行跳转
        try {
          await store.dispatch('asyncUserInfo')
          next()
        } catch (e) {
          // token 失效，获取不到用户信息，清除token 重新登录，
          await store.dispatch('asyncUserOut')
        }
      }

    }
  } else {
    //登录了去的不是login，直接放行
    next()
  }
})
export default router

路由独享守卫

举例子：紫禁城【皇帝，太后，妃子】相对应的【皇帝，太后，妃子】路上守卫

组件内守卫

举例子;我要去皇帝的屋子，已经到了皇帝屋子的外面了（进入了）