实现的想法：

路由导航保护router.beforeEach与登录凭据token一起工作。其中，router.beforeEach决定是否显示页面，token决定是否登录。

实施方法：

配置路由规则时，请在需要登录才能显示页面的路由规则配置对象中添加元属性，并在跳转页面时，在跳转后的路由信息中确认meta _ login属性是否为真

休假时(表示无需登录即可访问)，将直接进入该页面。

真(表示访问此页面需要登录)确认：在前端是否有登录凭据令牌。

如果有(表示已注册)，则直接转到该页面。

如果没有(表示您没有登录)，则转到登录页面。

键码：

Router-index.js

//配置路由规则

Const router=new Router({

Routes: [

{

path 3360 '/log in '，//登录页面

Name: 'Login '，

Component: Login，

}，

{

path 3360 '/tourist '，//访问者页面

Name: ' tourist '，

Component: Tourist，

}，

{

path 3360 '/my center '，//用户页面

Name :“我的中心”，

Component: MyCenter，

meta 3360 {

need _ login 3360 true///需要登录

}

}

]。

})；

使用//router . beforeach注册全球前台警卫，确认用户是否登录

router . beforeach((to，from，next)={

const { need _ log in=false }=to . meta；

Const { token }=store.state从//token获取令牌

If (need_login！令牌){

//如果页面需要登录，但用户没有登录，则转到登录页面

Const next _ page=to.name

Next({

Name: 'Login '，

Params: {

Redirect _ page: next _ page，//需要访问的页面路由名称将作为参数传递到登录页面

}，

})；

} else {

//不需要登录直接上市

next()；

}

})；

Login.vue

//获取用户信息

//将用户成功登录的回调中后台返回的令牌(token)通过vuex存储在localStorage中

Login () {

Let _ this=this

IF(this . loginform . username==' | | this . loginform . password=='){

Alert(“帐户或密码不能为空”)；

} else {

This.axios({

Method: ' post '，

Url: '/user/login '，

Data: _ this.loginForm

})。then(res={

console . log(RES . data)；

_ this . user token=' bearer ' RES . data . data . body . token；

//将用户token保存到vuex

_ this . changelog in({ authorization 3360 _ this . user token })；

_this。$ router . push('/home ')；

Alert(“登录成功”)；

})。catch(error={

Alert(“帐户或密码错误”)；

Console.log(错误)；

})；

}

}

Store-index.js

Const store=new Vuex。Store({

State: {

//存储令牌

authorization : local storage . getitem(' authorization ')？local storage . getitem(' authorization ')3360 ' '

}，

Mutations: {

修改//token并将token保存到localStorage

changelog in(状态，用户){

state . authorization=user . authorization；

local storage . setitem(' authorization '，user . authorization)；

}

}

})；