- 创建项目
- vue add cube-ui
- 设置令牌，进行全局共享，运用vuex,进行令牌存值，更改值
state: { token: localStorage.getItem('token') || '', }, mutations: { setToken(state,token) { state.token = token; } }, - 进行路由守卫，确定是登录状态才能访问的页面,抛出令牌，
router.beforeEach((to,from,next) => { if(to.meta.auth) { //从原数据中meta拿出看看用不用验证 //需要认证，则检查令牌 if(store.state.token) { //已登录 next(); } else { //去登陆 //去登陆 next({ path: '/login', query: {redirect: to.path} //路由地址的重定向 }) } } else { next(); }}) - 安装 axios 命令 ` npm i axios -s` 进行声明一个公共的$http
Vue.prototype.$http = axios; - login进行请求接口数据，结合cube-ui实现登录页面设计， 模拟校验登录
<!-- 数据模型，结构框架，登录时间 ，校验事件--> <cube-form :model="model" :schema="schema" @submit="handleLogin" @validate="handleValidate" ></cube-form> - 登录成功进行存储
localStorage.setItem('token',token); //缓存到本地this.$store.commit('setToken',token); //存入store
7. vue.config.js 设置API接口
8. 将令牌放到请求头中（拦截器），不要放到body做参数,
拦截axios所有http请求，预先放入token请求头
axios.interceptors.request.use(confirm => {
if(store.state.token){ //存在令牌，则放入请求头
config.headers.token = store.state.token;
}
return config;
}) 9. 测试请求其他接口，如果其他接口请求完后带有令牌则请求成功
10. 注销实现，在vuex中getters设置只读状态
getters: { //只读
isLogin: state => {
return !!state.token;
//如果不存在，转换成布尔值，空字符串变成false
} }11. 设置注销接口
app.get('/api/logout',function(req,res){
res.json({code: -1})
})12. 如果令牌失效的话，一切判断就没意义，在拦截器上再做一个公共处理响应拦截器，提前与处理
if(data.code == -1){
//清空缓存 store.commit('setToken',""); localStorage.removeItem("token");
}
13. 设置中间件，在处理所有接口的时候先执行中间件一遍，对令牌提前检验，不存在返回401，错误状态提示用户需要登录
app.use(function(req,res,next){
//检查token
if( /^\/pai/.test(req.path)){
if(req.path == 'api/login' || req.headers.token){
next();
} else {
res.sendStatus(401); //错误状态提示用户需要登录
}
}
})
app.get(14. 检验
handleValidate(ret) { console.log('校验'+ ret); }15. 设置需要受路由保护的界面
meta: {auth: true}16. 清空缓存
store.commit( 'setToken', '');
localStorage.removeItem('token')；
17. vuex mutation 和 action 的区别，前者是同步可以更改数据，后者是异步，action想更改数据还是需要调用mutation
18. 进行令牌进行判断，通过中间件和拦截器进行处理执行命令，路由守卫对登录进行用户访问页面的保护，令牌设置证书，时间的有效期
19. 遇到加上中间件判断时，页面打不开；登录成功后无法跳转页面，待解决？？
