vue-cli,登录状态储存token,vuex

vue-cli脚手架工具

• vue-cli是官方的一个脚手架工具，利用vue-cli我们可以生成一个基本的项目结构架子，所以呢它就被称为vue脚手架工具。
• 安装vue-cli npm install vue-cli -g
• 运行vue init webpack admin(admin为项目名字)

登录状态保存

HTTP请求是无状态的

cookie

• 保存在客户端
• 数据量小
• 安全性较低

session

• 保存在服务器端
• 相对较安全
• session可以依赖cokie,也可以不依赖使用URL
• 访问量增多，占用服务器资源，如果服务器挂了，所有保存信息都没了

token

• 服务器不存用户状态，定义通用算法
• 客户端第一次登陆后，服务器会产生一个token，返回给客户端
• 之后所有请求都会带着token
• 服务器根据算法校验token合法性

axios拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 将token给到一个前后台约定好的key中，作为请求发送
  let token = localStorage.getItem('mytoken')
  if (token) {
    config.headers['Authorization'] = token
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

导航守卫

全局守卫

router.beforeEach((to, from, next) => {
  let token = localStorage.getItem('mytoken')
  // 如果已经登录，那我不干涉你，让你随便访问
  if (token) {
    next()
  } else {
    if (to.path !== '/login') {
      // 如果没有登录，但你访问其他需要登录的页面，那我就让你跳到登录页面去
      next({path: '/login'})
    } else {
      // 如果没有登录，但你访问的login，那就不干涉你，让你访问
      next()
    }
  }
})

Vuex

Vuex是一个针对Vue.js开发的状态管理模式。

安装 npm i vuex -S

注册 Vue.use(Vuex)

• store (一个容器对象，存储Vuex中的state,mutations,actions,getters等)
• state (一个保存数据的对象，对象中的数据可以供所有组件使用)
• mutations(一个对象，保存的是更改state的函数，也只有它能更改state中的值，触发方式this.$store.commit(‘函数名’,参数),同步方法)
• actions(一个对象，保存的是触发mutations的函数，让mutations去修改state中的值)
• getters(一个对象，保存的是一些类似与计算属性的函数，可以通过他们得到任何依赖于state的新的数据)

var myStore =  new Vuex.Store({
        state:{
            //存放组件之间共享的数据
            name:"jjk"
        },
         mutations:{
             //显式的更改state里的数据
         },
         getters:{
             //获取数据的方法
         },
         actions:{
             //
         }
    });

总结

1. state中数据，不能直接修改，如果想修改，必须通过mutations
2. 如果组件想要直接从state上获取数据，需要this.$store.state.属性名
3. 如果组件，想要修改数据，必须使用mutations提供的方法，，需要this.$store.commit(‘方法的名称’,唯一的一个参数)
4. 如果store中state上的数据，在对外提供的时候，需要做一层包装，那么推荐使用getters，如果需要使用getters，则用this.$store.getters.名称