登录
- 不跨域:cookie和session记录状态
- 跨域:使用token使用跨域状态。
token
- 客户端发送用户名和密码进行登录
- 服务器验证通过之后,生成该用户token并返回
- 客户端存储该token。后续都携带该token发送请求
- 服务器验证token是否通过。
- 存在证明已存在,客户端请求时可以发送数据。
数据验证
- 用ui来验证。
<el-form-item prop="username">
//==================
// 这是表单的验证规则对象
loginFormRules: {
// 验证用户名是否合法
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
// 验证密码是否合法
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
表单重置:this.$refs(this指向log.vue),通过ui的方法
<el-form ref="loginFormRef">
//
resetLoginForm () {
// console.log(this);
this.$refs.loginFormRef.resetFields()
},
预验证,不通过就不会向服务器发送请求,ui的方法
validate
配置axios发起登录请求(main.js)
- import导包
main.js
配置Vue.prototype.$http = axios
- 配置请求的根路径:
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
- 请求后端mysql和node.js
const { data: res } = await this.$http.post('login', this.loginForm)
。因为方法返回值是promise,所以用await简化操作,并且用async修饰的函数。这样返回的就是一个具体响应对象。并且结构赋值res。- 返回200状态码,就登陆成功了。
登录之后操作
- 将登录成功之后,将服务器的token保存到客户端sessionStorage,因为登陆之外的其他api接口,必须登录之后才能解决。解决跨域问题。
- sessionStorage是会话期间存储的,token只在当前页面打开时候生效,localStorage是持久化的
window.sessionStorage.setItem('token', res.data.token)
路由导航守卫:防止用户没登陆,直接跳到home页。
- 看有没有token字符串,有的话就放行。没有强制跳回到首页。
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login' || to.path === '/') return next()
// 如果用户访问非登录路径,则判断有无登录凭证token
const loginToken = sessionStorage.getItem('token')
// 没有token,直接跳转登录页面
if (!loginToken) return next('/login')
// 有token,放行
next()
})
退出原理
- home.vue清除token就行了。
methods: {
logout() {
window.sessionStorage.clear()
this.$router.push('/login')
},
git操作
- git status 查看状态
- git add. 添加
- git commit 添加到本地仓库中
- git branch 处于login分支
- git checkout master切换到master分支(约等于cd)
- git merge login 基于master分支把login分支合并进来
- git push 推送到github