保存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语法规则慢慢改,熟悉了就好。