路由设计本规则考虑鉴权进入登录页面，完成登录操作进入首页。router/router.jsimportVuefrom"vue";importRouterfrom"vue-router";Vue.use(Router);importstorefrom"@/store/store";//(延迟加载)constLogin=()=>import("@/views/login");constHome=()=>import("@/views/home");constHomeRoute={path:"/",name:"首页",component:Home};export{HomeRoute};constrouter=newRouter({base:process.env.BASE_URL,routes:[{path:"/login",name:"登录",component:Login},HomeRoute]});router.beforeEach((to,from,next)=>{letloginName=store.state.user.loginName;if(to.path==="/"&&loginName==""){next("/login");}else{next();}});exportdefaultrouter;vue.config.jsletpath=require("path");module.exports={chainWebpack:config=>{config.resolve.alias.set("@",path.join(__dirname,"src"));配置.resolve.symlinks（真）；},publicPath:"./",devServer:{代理:{"/api":{目标:"http://jsonplaceholder.typicode.com/",ws:true,changeOrigin:true,pathRewrite:{"^/api":"/"}}}}};构建请请求实例utils/cookie.jsimportCookiesfrom"js-cookie";exportfunctiongetCookie(key){returnCookies.get(key);}exportfunctionsetCookie(key,val){returnCookies.set(key,val);}exportfunctionremoveCookie(key){returnCookies.remove(key);}导出函数getToken(){returnCookies.get("XY_TOKEN");}导出函数setToken(val){returnCookies.set("XT_TOKEN",val);}导出函数removeToken(){returnCookies.remove("XY_TOKEN");}导出函数getViewPower(){returnCookies.get("XY_VIEWPOWER");}导出函数setViewPower(val){returnCookies.set("XY_VIEWPOWER",val);}utils/localStorage.jsexportdefault{fetch(name){returnJSON.parse(window.localStorage.getItem(name)||"[]");},save(name,items){window.localStorage.setItem(name,JSON.stringify(items));}};utils/request.jsimportaxios来回m"axios";import{baseUrl}from"@/api/variable";importstorefrom"@/store/store";//axios请求实例constrequest=axios.create({baseURL:baseUrl,timeout:30000,headers:{"Content-Type":"application/json;charset=UTF-8"}});//请求拦截，传递token值request.interceptors.request.use(config=>{if(store.state.user.token){config.headers["token"]=store.state.user.token;}returnconfig;},error=>{returnPromise.reject(error);});//响应拦截，获取Real数据request.interceptors.response.use(respone=>{returnrespone;},error=>{returnPromise.reject(error);});导出默认请求；数据模型api/variable.jsconstbaseUrl="http://jsonplaceholder.typicode.com/";constwsUrl="";if(process.env.NODE_ENV=="production"){if(process.env.VUE_APP_FLAG=="pro"){baseUrl=localStorage.getItem("baseUrl");wsUrl=localStorage.getItem("wsUrl");}}export{baseUrl,wsUrl};api/post.jsimport来自“@/utils/request";exportfunctiongetAllPosts(){returnrequest({url:"posts",method:"get"});}store/store.jsimportVuefrom"vue";importVuexfrom"vuex";Vue.使用（Vuex）；从“./modules/app”导入应用程序；从“./modules/user”导入用户；从“./modules/post”导入帖子；从“./getters”导入getters；conststore=newVuex.Store({modules:{app,user,post},getters});导出默认商店;store/modules/user.jsconststate={loginName:""};constmutations={SET_LOGINNAME(state,loginName){state.loginName=loginName;}};constactions={login({commit},userInfo){returnnewPromise((res,ret)=>{commit("SET_LOGINNAME",userInfo);res();});},logout({commit}){returnnewPromise((res,ret)=>{commit("SET_LOGINNAME","");res();});}};exportdefault{namespaced:true,state,mutations,actions};store/modules/post.jsimport{getAllPosts}from"@/api/post";conststate={//所有文章标题titleList:[]};constmutations={//存储文章标题SET_TITLELIST(state,list){state.titleList=list;}};constactions={//获取文章标题getAllPosts({commit}){returnnewPromise((res,ret)=>{getAllPosts().then(data=>{if(data.status=="200"){commit("SET_TITLELIST",data.data);res(data.data);}}).catch(err=>{ret(err);});});}};exportdefault{namespaced:true,state,mutations,actions};componentviews/login.vue
