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:{
//
}
});
总结
- state中数据,不能直接修改,如果想修改,必须通过mutations
- 如果组件想要直接从state上获取数据,需要this.$store.state.属性名
- 如果组件,想要修改数据,必须使用mutations提供的方法,,需要this.$store.commit(‘方法的名称’,唯一的一个参数)
- 如果store中state上的数据,在对外提供的时候,需要做一层包装,那么推荐使用getters,如果需要使用getters,则用this.$store.getters.名称