Vue学习（六）登陆页面之token相关及访问权限及退出功能及Eslint语法警告

保存token

将登陆成功之后服务器分配给我们的token，保存到客户端的sessionStorage中。
因为项目中除了登陆之外的API接口，必须在登陆之后才能访问。所以在访问服务器其它接口时，需要告诉它我已经登陆，这时需要提供服务器分配给我们的令牌token。
而且token只应在当前网站打开期间生效，所以将token保存在sessionStorage中。因为LocalStorage是持久化的保存机制，sessionstorage是会话期间的存储机制。

相关知识点

1.http无状态
2.通过cookie在客户端记录状态（前后端间无跨域问题，推荐）
3.通过session在服务端记录状态（前后端间无跨域问题，推荐）
4.通过token方式维持状态（前后端间有跨域问题，推荐）

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的规则。
在文件页面点击右键可以看到格式化文档的快捷键方式，当用默认的格式化时，运行时会发生错误，说明默认的语法规则与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语法规则慢慢改，熟悉了就好。