将登陆成功之后服务器分配给我们的token，保存到客户端的sessionStorage中。 因为项目中除了登陆之外的API接口，必须在登陆之后才能访问。所以在访问服务器其它接口时，需要告诉它我已经登陆，这时需要提供服务器分配给我们的令牌token。 而且token只应在当前网站打开期间生效，所以将token保存在sessionStorage中。因为LocalStorage是持久化的保存机制，sessionstorage是会话期间的存储机制。
1.http无状态 2.通过cookie在客户端记录状态（前后端间无跨域问题，推荐） 3.通过session在服务端记录状态（前后端间无跨域问题，推荐） 4.通过token方式维持状态（前后端间有跨域问题，推荐）
我们可以先打印一下返回的结果
console.log(res)发现data中有token，接下来我们要把这个token保存到sessionStorage中。Item中键为token，值为res.data.token。
window.sessionStorage.setItem('token',res.data.token)通过编程式导航跳转到后台主页，路由地址是/home。 router是一个编程式导航对象，调用它提供的方法push，再为push提供一个地址。
this.$router.push('/home')接下来我们在components中新建一个home组件。 先按照空的根组件那样写
<template> <div>home 组件</div></template> <script> export default { } </script> <style lang="less" scoped></style>然后需要在router中以路由的形式渲染到根组件App中。首先导入import，然后在路由规则数组中新增一个路由规则。
import home from '../components/home.vue' { path: '/home', name: 'login', component: home}然后在登陆界面输入正确的账号密码后点击登陆 发现界面跳转到home，token已经保存到了sessionStorage中。
Home页面只允许在登陆成功后才能访问，但此时当我们处于home页面时，将当前的token清空，然后刷新页面，页面仍然处于home页面，不符合我们的需求。 所以我们要通过路由导航守卫控制页面的访问权限。即如果用户没有登陆，但是直接通过URL访问特定页面，需要重新导航到登陆页面。为路由对象添加beforeEach导航守卫。 beforeEach接收一个回调函数，回调函数包含三个形参，分别是to，from，next，它们分别代表我们将要访问哪个页面，我们是从哪个页面跳转而来，放行的函数。接下来我们要判断to所对应的地址是否是/login，如果是直接调用next函数放行，如果不是，就要访问sessionStorage中是否存有一个token，若没有强制跳转到登陆页面，若有调用next函数放行。
const router = new VueRouter({ routes }) // 挂载路由导航守卫 router.beforeEach((to, from,next) => { if (to.path == '/login') return next() const tokenstr = window.sessionStorage.getItem('token') if (!token) return next('/login') next() })此时在未登陆情况下，在导航栏输入home运行，页面会被重定向到登陆页面。
基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样后续的请求就不会携带token，必须重新登陆生成一个新的token才可以访问页面。 首先我们要在home页面新增一个退出的按钮
<el-button type="info" @click="logout">登陆</el-button>然后在行为区定义logout事件函数
methods: { logout() { window.sessionStorage.clear() this.$router.push('/login') } }接下来运行 进入home页面 点击按钮，返回到了登陆页面。 且sessionStorage中已经没有了token。
Eslint有着严格的语法检查，可以帮助我们养成很好的写代码习惯，但他有时候很烦，总是在不经意的地方报错。 可以在项目的根目录下新建一个配置文件，告诉编译器在格式化代码时如何进行格式化来满足Eslint的规则。 在文件页面点击右键可以看到格式化文档的快捷键方式，当用默认的格式化时，运行时会发生错误，说明默认的语法规则与Eslint的语法规则不同，这就很恶心了。 所以我们在根目录下创建一个格式化文件的配置项，文件名为.prettierrc，它是一个json格式的配置文件，文件里我们可以写一些相关的配置项。 比如启用单引号和不加分号
{ "semi: false, "singleQuote": true }配置好之后到需要改动的文件中按快捷键格式化即可。 或者直接修改Eslint的语法规则，比如下图中所犯错误的语法规则叫做space-before-function-paren 我们打开根目录下的.eslintrc.js文件，找到rules，直接将这个语法规则禁用。
rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'space-before-function-paren': 0 }个人目前觉得还是按照Eslint语法规则慢慢改，熟悉了就好。
