vue 用户登录 路由拦截 vuex cookie
// 页面跳转后发送ajax请求给后端 请求详细信息
//点击课程推荐跳转到推荐课程详细
// 页面刚加载立即执行函数 = mounted
<template><div>
<img :src="detail.img" />
<h1>{{ detail.title }}</h1>
<h3>{{detail.slogon }}</h3>
<h5>{{ detail.level }}</h5>
<p>{{ detail.why }}</p>
<div>
<ul v-for="item in detail.chapter">
<li>{{ item.title }}</li>
</ul>
</div>
<br/>
推荐课程：
<div>
<ul v-for="item in detail.recommends">
<!-- 这个方式有问题 -->
<!-- <li><router-link :to="{name:'index',query:{id:item.id}}">{{ item.title }}</router-link></li> -->
<li @click="changeDetail(item.id)">{{ item.title }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "CourseDetail",
data() {
return {
index: "CourseDetail",
detail: {
course: null,
img: null,
level: null,
slogon: null,
title: null,
why: null,
chapter: [],
recommends: []
}
};
},
// created:在模板渲染成html前调用
mounted() {
var id = this.$route.query.id;
this.getRouterData(id);
},
methods: {
getRouterData(nid) {
// 发送ajax请求给后端 请求详细信息
var _this = this;
this.$axios
.request({
url: this.$store.state.apiList.coursedetail+nid+'/',
methods: "GET"
})
.then(function(ret) {
// ajax请求发送成功后，获取的响应内容
// ret.data=
if (ret.data.code === 1000) {
_this.detail = ret.data.data;
}
})
.catch(function(ret) {
// ajax请求发送失败后，获取的响应内容
});
},
//点击课程推荐跳转到推荐课程详细
changeDetail(id){
// 我需要重新调用getRouterData 向后端请求数据,不然不然会显示为空
this.getRouterData(id)
this.$router.push({name:'CourseDetail',query:{id:id}})
}
}
};
</script>
<style scoped>
</style>
功能（2）
// 登录
//使用$store
// router.beforeEach 全局页面阻拦钩子
// router.beforeEach 局部认证钩子
// cookie 设置
// router.beforeEach 全局页面认证钩子
import Vue from 'vue'import App from './App'
import router from './router'
// 导入store组件
import store from './store/store'
// 导入axios用于发送数据给后端
import axios from 'axios'
//在vue的全局变量中设置了 $axios = axios
// 以后每个组件使用时： this.$axios
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
// 这是一个全局路由限制钩子 一般用来做一些进入页面前的限制
router.beforeEach(function(to, from, next){
// to 表示即将要进入的路由对象
//from 表示即将要离开的路由对象
//next 是继续跳转或中断的方法
// 如果路由meta.requireAuth参数 为ture 我需要检查下他的token值有才能让他访问
if (to.meta.requireAuth) {
// // 要去的url只有登录成功后才能访问
if (store.state.token){
// // /我就往下走
next()
}else{
next(
// 页面跳转 传了个值 一个路径 ,to.fullPath = 你当前要点击要跳转的路径
next({name: 'Login',query: {backUrl: to.fullPath}})
)
}
// 如果 路由中 没有定义要 校验限制进入，就直接进入
}else{
next()
}
})
cookie 设置
import Vue from 'vue'import Vuex from 'Vuex'
import Cookie from 'vue-cookies'
Vue.use(Vuex)
// 组件中通过 this.$store.state.username 调用
const state = {
// Cookie里面有值的话我就在cookie里面取值，没有我就自动注销
username: Cookie.get('username'),
token: Cookie.get('token'),
apiList: {
course: "http://127.0.0.1:8000/api/v1/course/",
coursedetail:`http://127.0.0.1:8000/api/v1/coursedetail/` ,
auth:'http://127.0.0.1:8000/api/v1/auth/',
},
}
const mutations = {
// 组件中通过this.$store.commit(参数)调用
//设置kookie
saveToken(state, userToken) {
// userToken 传过来的是一个对象,我可以通过点取值
state.username = userToken.username;
state.token = userToken.token;
Cookie.set('username', userToken.username, "20min")
Cookie.set('token', userToken.token, "20min")
},
// 清除 cookie
clearToken: function (state) {
state.username = null
state.token = null
Cookie.remove('username')
Cookie.remove('token')
}
}
export default new Vuex.Store({
state,
mutations,
})
功能（3）
// 登录 (登录后我就直接 跳转到他之前点击的页面)
<template><div>
<h1>登录页面</h1>
<div>账号
<input type="text" placeholder="请输入用户名" v-model="username">
</div>
<div>
密码
<input type="password" placeholder="请输入密码" v-model="password">
</div>
<div>
<input type="button" value="登录" @click="doLogin">
</div>
</div>
</template>
<script>
export default {
name:'Login',
data(){
return{
username:'',
password:'',
}
},
methods:{
doLogin:function(){
var _this = this
this.$axios.request({
url:this.$store.state.apiList.auth,
method:'POST',
data:{
user:this.username,
pwd:this.password
},
headers:{
'Content-Type':'application/json'
}
}).then(function(arg){
// 拿到后端的状态码进行判断
if(arg.data.code === 1000){
// 把token 放到state中共享
// _this.$store.state.token = arg.data.token
// _this.$store.state.username = _this.username
// saveToken 是一个参数,第二个参数我传了一个对象进去
_this.$store.commit('saveToken',{'token':arg.data.token,'username':_this.username})
//这个是我点击后发现没有登录 跳转过来的页面$route.query.backUrl是有值的
//登录后我就直接 跳转到他之前点击的页面
var url = _this.$route.query.backUrl
if(url){
_this.$router.push({path:url})
// 如果是直接登录的话 我就跳转到主页面
}else{
_this.$route.push({path:'/'})
}
}else{
alert(arg.data.error)
}
}).catch(function(arg){
console.log(发生错误)
})
}
}
}
</script>>
<style scoped>
</style>
// (局部限制) 你必须带token 才能访问我
mounted(){ if(!this.$store.state.token){
this.$router.push({name:'login'})
}
}
路由中的设置
import Vue from 'vue'import Router from 'vue-router'
// 引入路由页面
import Homepag from '@/components/Homepag'
import Course from '@/components/Course'
import CourseDetail from '@/components/CourseDetail'
import Login from '@/components/Login'
import FeatureLeesion from '@/components/FeatureLeesion'
//引入elment快速搭建
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用elment组件
Vue.use(ElementUI);
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Homepag',
component: Homepag,
meta:{
requireAuth:true
}
},
{
path: '/course',
name: 'Course',
component: Course,
meta:{
requireAuth:true
}
},
{
path: '/coursedetail/:id',
name: 'CourseDetail',
component: CourseDetail,
meta:{
requireAuth:true
}
},
{
path: '/login',
name: 'Login',
component: Login,
meta:{
requireAuth:false
}
},
{
path: '/featureleesion',
name: 'FeatureLeesion',
component: FeatureLeesion,
meta:{
requireAuth:true
}
},
]
})
以上是 vue 用户登录 路由拦截 vuex cookie 的全部内容， 来源链接： utcz.com/z/379645.html
